单击标题复选框时重置 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），则重置所有选定的行键).