#javascript #reactjs #antd #ant-design-pro
#javascript #reactjs #antd #ant-design-pro
Вопрос:
Я пытаюсь захватить ключ одного элемента в таблице. Но я получаю неопределенный, как я могу получить идентификатор?
https://ant.design/components/table/#components-table-demo-expand-children
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>);
Ответ №1:
Вам нужно добавить ключ prop к каждому объекту 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
});
}
};
смотрите ваш рабочий код здесь