AntD rowSelection 功能组件

【问题标题】：AntD rowSelection functional ComponentAntD rowSelection 功能组件
【发布时间】：2021-01-03 05:10:55
【问题描述】：

我正在尝试获取表格中的单个元素键。但我得到 undefined 我怎样才能获取 id？

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>);

Here's a screenshot of console.log()

【问题讨论】：

标签： javascript reactjs antd ant-design-pro

【解决方案1】：

你需要在dataSource数组的每个对象上添加一个key prop

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
      });
    }
};

查看您的工作代码here

【讨论】：