react-开发经验分享-解决antd Table组件selectedRows翻页后不保留上一页已选中items的问题

Author：Mr.柳上原

• 付出不亚于任何人的努力
• 愿我们所有的努力，都不会被生活辜负
• 不忘初心，方得始终

在用 antd Table 组件写一个产品选择框功能的时候，遇到了 antd Table 组件的 selectedRows 在翻页后再勾选新的 item ，不会保留上一页已勾选的 item ，而是基于当前页面的 dataSource 重新记录当前的勾选项（注： selctedRowKeys 没有这个问题，可以正常的跨页记录总体的勾选项的 key ）。

尝试使用onSelect 和 onSelectAll 方法解决问题。

import * as _ from 'lodash';  // lodash的深拷贝函数_.cloneDeep

onSelect = (record:any,selected:any,selectedRows:any,nativeEvent:any) => {
        console.log("record:",record);
        console.log("selected:",selected);
        console.log("selectedRows:",selectedRows);
        console.log("nativeEvent:",nativeEvent);
        if(selected){
            let productListSelectedRowsPlus = this.state.productListSelectedRowsPlus;
            productListSelectedRowsPlus.push(record);
            this.setState({productListSelectedRowsPlus});
        }
        if(!selected){
            let productListSelectedRowsPlus = this.state.productListSelectedRowsPlus;
            let delIndex = null;
            for(let i=0;i{
        console.log("selected:",selected);
        console.log("selectedRows:",selectedRows);
        console.log("changeRows:",changeRows);
        if(selected){
            let productListSelectedRowsPlus = this.state.productListSelectedRowsPlus;
            this.setState({productListSelectedRowsPlus:productListSelectedRowsPlus.concat(changeRows)});
        }
        if(!selected){
            let productListSelectedRowsPlus = _.cloneDeep(this.state.productListSelectedRowsPlus);
            let delIndex = [];
            for(let i=0;i{
                return item != undefined;
            })
            this.setState({productListSelectedRowsPlus:pureProductListSelectedRowsPlus});
        }
    }

    onProductListSelectedRowKeysChange = (productListSelectedRowKeys:any,productListSelectedRows:any) => {
        let a = _.cloneDeep(this.state.productListSelectedRows);
        this.setState({ 
            productListSelectedRowKeys,
            productListSelectedRows
         });
        
    };