antd表格的onChange事件中,selectedRowKeys为什么不是数字数组?
创始人
2024-11-07 10:01:02
0

在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 (
    
      ...
    
); }

相关内容

热门资讯

安卓换鸿蒙系统会卡吗,体验流畅... 最近手机圈可是热闹非凡呢!不少安卓用户都在议论纷纷,说鸿蒙系统要来啦!那么,安卓手机换上鸿蒙系统后,...
app安卓系统登录不了,解锁登... 最近是不是你也遇到了这样的烦恼:手机里那个心爱的APP,突然就登录不上了?别急,让我来帮你一步步排查...
安卓系统拦截短信在哪,安卓系统... 你是不是也遇到了这种情况:手机里突然冒出了很多垃圾短信,烦不胜烦?别急,今天就来教你怎么在安卓系统里...
安卓系统要维护多久,安卓系统维... 你有没有想过,你的安卓手机里那个陪伴你度过了无数日夜的安卓系统,它究竟要陪伴你多久呢?这个问题,估计...
windows官网系统多少钱 Windows官网系统价格一览:了解正版Windows的购买成本Windows 11官方价格解析微软...
安卓系统如何卸载app,轻松掌... 手机里的App越来越多,是不是感觉内存不够用了?别急,今天就来教你怎么轻松卸载安卓系统里的App,让...
怎么复制照片安卓系统,操作步骤... 亲爱的手机控们,是不是有时候想把自己的手机照片分享给朋友,或者备份到电脑上呢?别急,今天就来教你怎么...
安卓系统应用怎么重装,安卓应用... 手机里的安卓应用突然罢工了,是不是让你头疼不已?别急,今天就来手把手教你如何重装安卓系统应用,让你的...
iwatch怎么连接安卓系统,... 你有没有想过,那款时尚又实用的iWatch,竟然只能和iPhone好上好?别急,今天就来给你揭秘,怎...
iphone系统与安卓系统更新... 最近是不是你也遇到了这样的烦恼?手机更新系统总是失败,急得你团团转。别急,今天就来给你揭秘为什么iP...