【React+antd】antd 4.X Table组件中复选框选中某一行单表现为全选现象
目录
一、问题产生背景
二、问题解决思路
三、解决方案
一、问题产生背景
升级antd从3.x到4.x，重构页面。有些代码在3.x可以正常跑，但在4.x就会有形形色色、奇奇怪怪的问题。
这次就是关于Table组件复选的问题。表现为，选择其中一行内容，却一下子全选了当页所有的数据，有时又会突变成选不中。如下图
二、问题解决思路
从表现看不出来有什么问题，于是先打印了下 rowSelection 的 selectedRowKeys 和 selectedRows ，发现 selectedRowKeys 是undefined；selectedRows 是 选中的 record。
顿感离谱，想着去官网看看，是不是我写的内容不被 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}
/>