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

Question

所以我有一个使用选择/取消选择所有复选框选项实现的 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,
    }),
  };

Answer 1

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

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

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

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

在此处查看工作代码：