antd元件庫使用筆記
阿新 • • 發佈:2020-07-29
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來獲取表單值等操作
FormInstance
// 獲取輸入框name的值 this.props.from.getFieldValue("name")