AntD行选择功能组件

Question

我正在尝试获取表中的单个元素键。但我没有定义如何获取id？

https://ant.design/components/table/#components-表演示扩展子

const [select, setSelect] = useState({
selectedRowKeys: [],
loading: false,
});
console.log("selectedRowKeys", select);
const { selectedRowKeys, loading } = select;
const rowSelection = {
selectedRowKeys,
onChange: (selectedRowKeys) => {
setSelect({
...select,
selectedRowKeys: [...select.selectedRowKeys, selectedRowKeys],
});
},
};
return (
<div>
<Table
columns={columns}
rowSelection={rowSelection}
dataSource={dataSource}
loading={!props.employeeList}
/>
</div>);

这是console.log((的屏幕截图

Answer 1

您需要在dataSource数组的每个对象上添加一个密钥道具

const dataSource = [
{
key: 1,
name: `Edward King 1`,
age: 32,
address: `London, Park Lane no. 1`
},
{
key: 2,
name: `Edward King 2`,
age: 35,
address: `London, Park Lane no. 2`
}
];

那么在您的rowSelection对象中，您需要删除此代码[...select.selectedRowKeys, selectedRowKeys]，如果您取消选择一个项目并再次选择它，这将导致重复。应该是：

const rowSelection = {
selectedRowKeys,
onChange: (selectedRowKeys) => {
setSelect({
...select,
selectedRowKeys: selectedRowKeys
});
}
};

在这里查看您的工作代码