如何重置 ant design table 选定的行？答案

【问题标题】：How to reset ant design table selected rows?如何重置 ant design table 选定的行？
【发布时间】：2020-02-10 16:46:02
【问题描述】：

我正在使用ant design table 组件并且我选择了行。
我想onClick 重置选定的行。

我找不到它存储选定行的位置。

  const rowSelection = {
        onChange: (selectedRowKeys, rows) => {
          this.setState({
            selectedRowsArray: [...rows]
          });
        },
      };

  <Table rowSelection={rowSelection} columns={columns} dataSource={paymentsHistory} />

任何想法如何清除选定的rows？

【问题讨论】：

标签： javascript html reactjs antd

【解决方案1】：

rowSelection 还具有selectedRowKeys 属性，可帮助您在任何时间点控制选定的行。

const { selectedRowsArray } = this.state;
const rowSelection = {
      selectedRowKeys: selectedRowsArray,
      onChange: (selectedRowKeys, rows) => {
        this.setState({
          selectedRowsArray: [...rows]
        });
      },
    };

<Table rowSelection={rowSelection} columns={columns} dataSource={paymentsHistory} />

Codesandbox Example | Antd Docs

【讨论】：

如果 selectedRowsArray 是一个对象数组怎么办，这会以同样的方式工作吗？
不确定你的意思，selectedRowKeys 是表格的参数，它必须是字符串或数字数组

【解决方案2】：

我们也可以用钩子来做到这一点：

import { useState } from 'react';
import { Table, Button } from 'antd';

function App() {
    const [selectedRowKeys, setRowKeys] = useState([]);
    const [loading, setLoading] = useState([]);


    const start = () => {
        setRowKeys([]);
    };

    const onSelectChange = selectedRowKeys => {
        setRowKeys(selectedRowKeys);
    };

    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
    };

    const dataSource = [
        {
            key: '1',
            name: 'Mike',
            age: 32,
            address: '10 Downing Street',
        },
        {
            key: '2',
            name: 'John',
            age: 42,
            address: '10 Downing Street',
        }, enter code here
    ];

    const columns = [
        {
            title: 'Name',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: 'Age',
            dataIndex: 'age',
            key: 'age',
        },
        {
            title: 'Address',
            dataIndex: 'address',
            key: 'address',
        },
    ];


    return (
        <div className="App">
            <Button type="primary" onClick={start} >
                Reload
            </Button>
            <Table dataSource={dataSource} columns={columns} rowSelection={rowSelection} />;
        </div>
    );
}

export default App;

【讨论】：