antd table 點選行觸發radio 或 checkbox
阿新 • • 發佈:2018-12-26
1. const selectedRowKeys = [] // 定義選中的key陣列 2.// 單選 const rowRadioSelection = { selectedRowKeys: selectedRowKeys, // 選中行的key type: 'radio', // 型別 : radio & checkbox onChange: onSelectedRowKeysChange, }
3. // 改變selectedRowKeys onSelectedRowKeysChange = (selectedRowKeys: string[]) => { this.selectedRowKeys = selectedRowKeys }
4. // 點選行事件
rowRadioSelected = (record) => {
if (!this.selectedRowKeys.length) {
this.selectedRowKeys.push(record['key'])
} else {
if (this.selectedRowKeys.indexOf(record['key']) === -1) {
this.selectedRowKeys.splice(0, 1, record['key'])
}
}
5. // antd table components
<Table
rowKey={(_, i) => `${i}`}
columns={this._columns}
dataSource={modelList && modelList.slice()}
rowSelection={ rowRadioSelection}
onRow={record => {
return {
onClick: () => {
rowRadioSelected(record)
},
}
}
}
/>
參考: https://codesandbox.io/s/000vqw38rl