下面是一个示例,演示如何仅选中变化后的数据:
import React, { useState } from 'react';
import { Table } from 'antd';
const MyTable = () => {
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
const [selectedRows, setSelectedRows] = useState([]);
const columns = [
{
title: 'ID',
dataIndex: 'id',
key: 'id',
},
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
];
const data = [
{
key: '1',
id: '1',
name: 'John',
},
{
key: '2',
id: '2',
name: 'Doe',
},
// 添加更多数据
];
const onSelectChange = (selectedKeys, selectedRows) => {
// 在选择变化时,更新选中的行和键
setSelectedRowKeys(selectedKeys);
setSelectedRows(selectedRows);
};
const rowSelection = {
selectedRowKeys,
onChange: onSelectChange,
};
return (
<Table
rowSelection={rowSelection}
columns={columns}
dataSource={data}
rowKey="key"
/>
);
};
export default MyTable;
在这个示例中,我们使用 setSelectedRowKeys 和 setSelectedRows 来分别更新选中的行的键和数据。这样,当你选择、取消选择、再次选择后,只会选中变化后的数据,而不会同时选中变化前和变化后的数据。这是通过维护两个状态来实现的,一个用于选中的键,另一个用于选中的行数据。