问题描述: 在日常开发中,我们经常会有这样一个需求,需要分页加载table数据,而且支持多选, 页面切换时,在第一页选中的数据,切换到第二页后,如果再次选中某一条数据,如果我们用onSelect方法,该方法返回的function(selectedRowKeys, selectedRows)中的selectedRowKeys不包含前一页已选择的数据,这样我们就无法统计所有已选择的数据了,这里我推荐使用onSelect方法,function(record, selected, selectedRows, nativeEvent)各个参数介绍如下; 1、record就是当前操作(选中或取消选中)的item 2、selected是个布尔值,true代表本次是选中操作,false就是取消选中 3、selectedRows是一个数组,就是当前已选择的items(没有跨页的记录)
在antd的官方文档中,是一次性加载了所有的数据,所以不存在分页一说,他在第二页后还会记录上一页的已选数据,而我们日常开发中,每次分页都是重新请求新的数据,所以不能用官网上demo中的onchange方法。
演示下onchange方法产生的bug过程
当我们用官网上demo中的onchange方法时,假如每次请求5条数据,在第一页时。我们选中了第1条、第2条、第三条数据,此时selectedRowKeys = 【1,2,3】,我们添加到项目的state的mySelectRowkeys中,mySelectRowkeys = 【1,2,3]; 然后我们切换页面到page2,此时又重新调用借口 返回第二页的5条数据,我们选中第二页的第一条数据,假设他的key=6,此时onchange==function(selectedRowKeys, selectedRows)返回的selectedRowKeys=6,然后我们往项目的state的mySelectRowkeys中push key=6的数据,此时mySelectRowkeys=【1,2,3,6】;这时我们再将页面切换回第一页,在第一页我们取消key=1的第一条数据的选中状态,此时onchange方法返回给我们的selectedRowKeys =【2,3】;当我们拿到2和3时,我们该怎么操作mySelectRowkeys数组中的数据呢,怎么才能将key=1的数据清除呢?????此时我们没有办法做到的,此时我看了下antd官网,提供给我们另一个方法onSelect=function(record, selected, selectedRows, nativeEvent);就能帮我们解决这个问题了