[英]How to toggle a checkbox in a row of a antd table?
It is there in antd
documentation, but you need to take a state to handle it. 它存在于antd
文档中,但您需要采用状态来处理它。
Rows can be selectable by making first column as a selectable column. 通过将第一列作为可选列,可以选择行。
You can use 您可以使用
onRow={record => ({
onClick: () => {
this.selectRow(record);
}
})}
and in selectRow 并在selectRow中
selectRow = record => {
const selectedRowKeys = [...this.state.selectedRowKeys];
if (selectedRowKeys.indexOf(record.key) >= 0) {
selectedRowKeys.splice(selectedRowKeys.indexOf(record.key), 1);
} else {
selectedRowKeys.push(record.key);
}
this.setState({ selectedRowKeys });
}
There is an onRow
property that you can use. 您可以使用onRow
属性。 See the example from the official documentation: 请参阅官方文档中的示例:
class App extends React.Component {
state = {
selectedRowKeys: [],
};
selectRow = (record) => {
const selectedRowKeys = [...this.state.selectedRowKeys];
if (selectedRowKeys.indexOf(record.key) >= 0) {
selectedRowKeys.splice(selectedRowKeys.indexOf(record.key), 1);
} else {
selectedRowKeys.push(record.key);
}
this.setState({ selectedRowKeys });
}
onSelectedRowKeysChange = (selectedRowKeys) => {
this.setState({ selectedRowKeys });
}
render() {
const { selectedRowKeys } = this.state;
const rowSelection = {
selectedRowKeys,
onChange: this.onSelectedRowKeysChange,
};
return (
<Table
rowSelection={rowSelection}
columns={columns}
dataSource={data}
onRow={(record) => ({
onClick: () => {
this.selectRow(record);
},
})}
/>
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.