单击标题复选框时重置 antd 表格行选择

【问题标题】：Reset antd table row selections when click on the header checkbox单击标题复选框时重置 antd 表格行选择
【发布时间】：2021-01-28 20:56:25
【问题描述】：

所以我有一个用选择/取消选择所有复选框选项实现的 antd 表。如果用户只选择了几个复选框，然后单击标题处的复选框，我想要做什么，选定的复选框应该重置。当前行为是选择所有复选框（行）。

以下是我的rowSelection 代码

const rowSelection = {
    onSelectAll: (selected: any, selectedRows: any, changeRows: any) => {
      if(selectedRows.length !== 15){
        console.log("reset checkboxes");
      }
    },
    onChange: (selectedRowKeys: any, selectedRows: any) => {
      setSelectedRows(selectedRows);
    },
    getCheckboxProps: (record: any) => ({
      disabled: record.name === "Disabled User",
      name: record.name,
    }),
  };

【问题讨论】：

标签： javascript reactjs antd

【解决方案1】：

一种解决方案是控制选定的行。

const [selectedRowKeys, setSelectedRowKeys] = useState([]);

const rowSelection = {
    selectedRowKeys: selectedRowKeys,
    onSelectAll: (selected, selectedRows, changeRows) => {
      if (selectedRowKeys.length !== 0) {
        setSelectedRowKeys([]);
      }
    },
    onChange: (selectedRowKeys, selectedRows) => {
      setSelectedRowKeys(selectedRowKeys);
    }
};

当您单击行上的复选框时，onChange 函数将执行并设置选定的行键。当您单击标题处的复选框时，onChange 函数将再次执行并设置所有行键，然后设置onSelectAll（注意onChange 上的 setState 不会立即生效）然后重置所有选定的行键如果有多个选中的行（on 状态）。

在此处查看工作代码：

【讨论】：