单击标题复选框时重置 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函数将执行并设置选定的行键。当您单击标题处的复选框时，该onChange函数将再次执行并设置所有行键，然后onSelectAll（注意 setState ononChange不会立即生效）如果有多个选定行（on state），则重置所有选定的行键).