antd-ReactTable表格的复选框问题

项目场景：

在react项目中复选框是比较常用的，但是react的复选框是一个坑，我也是在测试了很多次，最后才解决这个问题

问题描述

当使用React的Table组件中的复选框时，重新渲染表格和分页可能会出现表格残留问题，复选框依然选中。ps：（如果你的复选框点了一下全选了，那么应该是你没有给每条数据设置单独的key设置了就好了）

原因分析：

看网上的解决方法有很多，好多都是让清除rowSelection，把rowSelection设置为[],但是这种方法是不可取的，当你重新渲染表格时会发现复选框不能选了。 

解决方案：

 解决方法，配置Table中的rowSelection属性，在onChange事件中将选中的selectedRowKeys存入state中，（如果用的是函数组件，存到useState)。然后设置selectedRowKeys为onChange选中的值

1.  
   const ListRowSelection = {
2.  
   type: 'checkbox',
3.  
   onChange: (selectedRowKeys, selectedRows) => {
4.  
   console.log(this.state.BomPackSelectedRowKeys)
5.  
   this.setState({
6.  
   BomPackBoxGuid: selectedRowKeys[0],
7.  
   BomPackSelectedRowKeys:selectedRowKeys
8.  
   })
9.  
   },
10.  
    selectedRowKeys:this.state.BomPackSelectedRowKeys
11.  
    };

1.  
   <Table
2.  
   columns={boxColumn}//表头
3.  
   dataSource={boxTable}//数据
4.  
   size='small'
5.  
   pagination={false}//设置不分页
6.  
   rowSelection={ListRowSelection}
7.  
   onRow={record => {//设置行点击事件
8.  
   return {
9.  
   onClick: event => ClickRow(record, event)
10.  
    }
11.  
    }}
12.  
    />

如果重新渲染表格就把值清空就好了，注意要写成[]，因为onChange事件拿到的是数组

1.  
   this.setState({
2.  
   BomPackSelectedRowKeys:[]
3.  
   })
4.  
    
5.  

如果有什么不同的意见，请大家指出

这篇好文章是转载于：学新通技术网