reactjs - 如何使用 onclick 函数表取消选中所有状态选定行键 - Ant Design

Question

我有功能按钮，该按钮需要清除所有选定的行键，现在发生了什么，状态已经清除，但仍检查表。我不知道我的功能是否正确，或者是否需要在我的功能内部进行更改或使用 useEffect。我在表格中使用 Ant Design，在前端使用 React Js。

这是我的按钮：

<Button type="primary" onClick={unCheckHandler} className="btn-pink">Clear</Button>

这是我的处理函数：

const [selectedRowsKeys, setSelectedRowsKeys] = useState([]);
const [selectedRows, setSelectedRows] = useState([]);

const onSelectedRowKeysChange = (selectedRows, selectedRowsKeys) =>{
    setSelectedRows(selectedRows)
    setSelectedRowsKeys(selectedRowsKeys);
}
const rowSelection = {
    selectedRows,
    selectedRowsKeys,
    onChange: onSelectedRowKeysChange
};

const unCheckHandler = () => {
    setSelectedRowsKeys([])
    setSelectedRows([])
}

useEffect(() => {

},[unCheckHandler])

console.log(selectedRowsKeys,"---", selectedRows)

桌子：

    <Table 
    dataSource={props.dataSource} 
    columns={props.columns}
    size="small"
    rowSelection={{
        type: "checkbox",
        ...rowSelection,
    }}
    pagination={false}
/>

样本日志：

标签： reactjsant-design-pro

Answer 1

您需要根据Ant Design 文档rowSelection.selectedRowKeys设置属性。您现在只是在设置，这似乎不起作用。selectedRows

此处的示例演示了它是如何工作的。

const rowSelection = {
    selectedRowKeys,
    onChange: onSelectedRowKeysChange
};