react antd table如何清空选中行

在 React Antd Table 组件中，可以通过设置 selectedRowKeys 属性来控制已经被选中的

行。要清空所有选中的行，只需将该属性值设为空数组即可。

示例代码如下：

import { useState } from 'react';
import { Table } from 'antd';
 
const MyTable = () => {
  const [selectedRows, setSelectedRows] = useState([]); // 用于存储选中的行
  
  const handleSelectChange = (selectedRowKeys) => {
    setSelectedRows(selectedRowKeys);
  };
 
  return (
    <div>
      <Table
        dataSource={data}
        columns={columns}
        rowSelection={{ selectedRowKeys: selectedRows, onChange: handleSelectChange }}
      />
      
      <button onClick={() => setSelectedRows([])}>清空选中</button>
    </div>
  );
};

　　上述代码中，我们使用了 useState Hook 创建了一个名为 selectedRows 的状态变

量，并初始化为空数组。然后，我们定义了一个 handleSelectChange 函数作为 onChan

ge 事件处理程序，当选中或取消选中行时会调用此函数更新 selectedRows 的值。最

后，我们在表格外部添加了一个按钮，点击该按钮时会调用 setSelectedRows([]) 来清

空选中的行。

 

转自：文心一言