AntD rowSelection 功能组件

Posted 2023-03-07

【中文标题】AntD rowSelection 功能组件

【英文标题】：AntD rowSelection functional Component

【发布时间】：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()

【参考方案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