單擊標題復選框時重置 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不會立即生效），如果有多個選中的行，則重置所有選中的行鍵（在狀態）。

在此處查看工作代碼：