1. 程式人生 > 實用技巧 >antd元件庫使用筆記

antd元件庫使用筆記

1、table表單,開啟複選框時,多選刪除,刪除成功之後需要清除之前已選擇的部分。此時需要給table一個

rowSelection屬性,屬性值裡面使用selectedRowKeys和onChange配合使用

並在刪除成功後將selectedRowKeys屬性值清空即可
selectedRowKeys指定選中項的 key 陣列,需要和 onChange 進行配合,其實質和input框的雙向資料繫結是一個原理

render() {
    const { loading, selectedRowKeys } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    };
    
const hasSelected = selectedRowKeys.length > 0; return ( <div> <div style={{ marginBottom: 16 }}> <Button type="primary" onClick={this.start} disabled={!hasSelected} loading={loading}> Reload </Button> <span style={{ marginLeft: 8
}}> {hasSelected ? `Selected ${selectedRowKeys.length} items` : ''} </span> </div> <Table rowSelection={rowSelection} columns={columns} dataSource={data} /> </div> ); }

2、form的使用,在使用form表單的元件中,使用Form.create函式處理過的元件會有一個form屬性,即this.props.form。此時就可以通過this.props.form來獲取表單值等操作

注意在v4版本中,廢棄了Form.create轉而使用Form.useForm,這兩個函式都返回一個form例項

FormInstance

// 獲取輸入框name的值
this.props.from.getFieldValue("name")