antd-React中Table表格的复选框问题

原创已于 2024-07-22 14:25:50 修改 · 3.2k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端

于 2022-08-09 12:13:11 首次发布

本文介绍了解决React Table组件中复选框状态残留的问题。通过正确配置rowSelection属性并利用onChange事件来同步更新选中状态，可以有效避免重新渲染表格时复选框的状态错误。

问题描述

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

原因分析：

表格数据切换时未重置复选框选中信息

解决方案：

解决方法，配置Table中的rowSelection属性，在onChange事件中拿到选中的selectedRowKeys。(selectedRowKeys就是你当前复选框选中的数据key) 然后设置selectedRowKeys为onChange选中的值

const [selectedRowKeys,setSelectedRowKeys] = useState([])    

const ListRowSelection = {
            type: 'checkbox',
            onChange: (selectedRowKeys, selectedRows) => {
              setSelectedRowKeys(selectedRowKeys)
            },
            selectedRowKeys:selectedRowKeys
       };

                         <Table
                            columns={column}//表头
                            dataSource={dataSource}//数据
                            rowSelection={ListRowSelection}
                            />

如果重新渲染表格就把值清空就好了