在antd的表格组件中,当用户选中行或取消选中行时,onChange事件会触发并返回当前所选中的行的key。selectedRowKeys属性是一个存储所有选中行key的数组。然而,有时候在事件回调函数中,selectedRowKeys却不是一个数字数组,这通常是由于在当前表格中使用了rowSelection的mode属性为'checkbox'或'multiple'时,造成的。具体解决方案如下:
如果需要在onChange事件中获取所选中行的key数组,则需要手动处理selectedRowKeys属性的值,以确保其为数字数组。可以使用Array.from()或者map()方法将值转换为数字类型。示例代码如下:
const onTableChange = (pagination, filters, sorter, extra) => {
const { currentDataSource } = extra;
const { selectedRowKeys } = extra;
// 如果selectedRowKeys不是数字数组,则需要手动处理
const keys = Array.from(selectedRowKeys).map(Number);
// 或者使用map方法
// const keys = selectedRowKeys.map(item => Number(item));
console.log('selectedRowKeys:', keys);
}
在表格组件中,需要设置rowSelection的onChange属性为onTableChange,这样在选中行或取消选中行时就会触发回调函数,并传递当前所选中行的key数组作为参数。示例代码如下:
import { Table } from 'antd';
function Demo() {
const dataSource = [
...
];
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
const onTableChange = (pagination, filters, sorter, extra) => {
const { currentDataSource } = extra;
const { selectedRowKeys } = extra;
// 如果selectedRowKeys不是数字数组,则需要手动处理
const keys = Array.from(selectedRowKeys).map(Number);
// 或者使用map方法
// const keys = selectedRowKeys.map(item => Number(item));
console.log('selectedRowKeys:', keys);
setSelectedRowKeys(keys);
}
const rowSelection = {
selectedRowKeys,
onChange: onTableChange,
// 注意:mode属性必须为'checkbox'或'multiple'
mode: 'checkbox'
};
return (
...
);
}