react-开发经验分享-解决antd Table组件selec

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<productListSelectedRowsPlus.length;i++){
                if(productListSelectedRowsPlus[i].id==record.id){
                    delIndex = i;
                    break;
                }
            }
            console.log(delIndex);
            productListSelectedRowsPlus.splice(delIndex,1);
            this.setState({productListSelectedRowsPlus});
        }
    } 
    onSelectAll = (selected:any,selectedRows:any,changeRows:any) =>{
        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<productListSelectedRowsPlus.length;i++){
                for(let j=0;j<changeRows.length;j++){
                    if(changeRows[j].id==productListSelectedRowsPlus[i].id){
                        delIndex.push(i);
                        break;
                    }
                }
            }
            console.log(delIndex);
            for(let k=0;k<delIndex.length;k++){
                delete productListSelectedRowsPlus[delIndex[k]];
            }
            let pureProductListSelectedRowsPlus = productListSelectedRowsPlus.filter((item:any)=>{
                return item != undefined;
            })
            this.setState({productListSelectedRowsPlus:pureProductListSelectedRowsPlus});
        }
    }

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