首頁猿問單擊標(biāo)題復(fù)選框時重置 antd 表行選擇

單擊標(biāo)題復(fù)選框時重置 antd 表行選擇

JavaScript

紅糖糍粑 2023-05-11 16:20:56

所以我有一個用選擇/取消選擇所有復(fù)選框選項(xiàng)實(shí)現(xiàn)的 antd 表。如果用戶只選擇了幾個復(fù)選框，然后在單擊標(biāo)題處的復(fù)選框時，我想做什么，應(yīng)該重置選定的復(fù)選框。當(dāng)前行為是選擇所有復(fù)選框（行）。以下是我的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, }), };

查看完整描述

1 回答

慕容森

TA貢獻(xiàn)1853條經(jīng)驗(yàn) 獲得超18個贊

一種解決方案是使選定的行受控。

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

const rowSelection = {

selectedRowKeys: selectedRowKeys,

onSelectAll: (selected, selectedRows, changeRows) => {

if (selectedRowKeys.length !== 0) {

setSelectedRowKeys([]);

}

},

onChange: (selectedRowKeys, selectedRows) => {

setSelectedRowKeys(selectedRowKeys);

}

};

當(dāng)您單擊行上的復(fù)選框時，該onChange函數(shù)將執(zhí)行并設(shè)置選定的行鍵。當(dāng)您單擊標(biāo)題處的復(fù)選框時，該onChange函數(shù)將再次執(zhí)行并設(shè)置所有行鍵，然后onSelectAll（注意 setState ononChange不會立即生效）如果有多個選定行（on state），則重置所有選定的行鍵).

反對回復(fù) 2023-05-11