【React+antd】antd 4.X Table组件中复选框选中某一行单表现为全选现象

目录

一、问题产生背景

二、问题解决思路

三、解决方案


一、问题产生背景

        升级antd从3.x到4.x,重构页面。有些代码在3.x可以正常跑,但在4.x就会有形形色色、奇奇怪怪的问题。

        这次就是关于Table组件复选的问题。表现为,选择其中一行内容,却一下子全选了当页所有的数据,有时又会突变成选不中。如下图

【React+antd】antd 4.X Table组件中复选框选中某一行单表现为全选现象_第1张图片

二、问题解决思路

        从表现看不出来有什么问题,于是先打印了下 rowSelection selectedRowKeys 和   selectedRows ,发现 selectedRowKeys 是undefined;selectedRows 是 选中的 record。

【React+antd】antd 4.X Table组件中复选框选中某一行单表现为全选现象_第2张图片

        顿感离谱,想着去官网看看,是不是我写的内容不被 4.x 兼容。

        官网的写法和我的大体是一致的没有问题,搞得我一筹莫展。3.x还能够正常跑的代码,4.x就不行了,还不是兼容的问题。我简直不李姐

        管你理不理解,问题还是要解决。于是和无头苍蝇一样在网上进行检索。

        其中有一个问题解决方式吸引了我的注意。问题表现形式不是我的那种,是多选的时候会选中下页的表格同行数据。回答如下:

        table组件多选时,会选中下一页的表格同行数据

        解决方法是Table中设置rowKey进行唯一标识。该答案中说rowSelection.selectedRowKeys 来控制选中项时,selectedRowKeys 控制的只是dataSource当前的顺序编号。

        联想到我打印出selectedRowKeys 为undefined,应该也是在这个标号上有问题,没有取到值导致的。

        所以,就死马当活马医,给设置了rowKey

        结果,成了。 yeah~ 开心子

三、解决方案

        为Table组件设置 rowKey ,以record中的id作为唯一标识。

        rowKey={record => record.id}

        代码如下:

onSelectChange(selectedRowKeys, selectedRows) {
    ......    
}


const rowSelection = {
    selectedRowKeys,
    onChange: this.onSelectChange.bind(this),
};


 record.id}
  rowSelection={rowSelection}
/>

你可能感兴趣的:(使用antd的疑难杂症,antd,4.X升级变更,react.js,前端,antd)