1. 程式人生 > >antd table 點選行觸發radio 或 checkbox

antd table 點選行觸發radio 或 checkbox

 

 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