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

项目场景:

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


问题描述

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


原因分析:

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


解决方案:

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

    const ListRowSelection = {
            type: 'checkbox',
            onChange: (selectedRowKeys, selectedRows) => {
                console.log(this.state.BomPackSelectedRowKeys)
                this.setState({
                    BomPackBoxGuid: selectedRowKeys[0],
                    BomPackSelectedRowKeys:selectedRowKeys
                })
            },
            selectedRowKeys:this.state.BomPackSelectedRowKeys
       };

                         <Table
                            columns={boxColumn}//表头
                            dataSource={boxTable}//数据
                            size='small'
                            pagination={false}//设置不分页
                            rowSelection={ListRowSelection}
                            onRow={record => {//设置行点击事件
                                return {
                                    onClick: event => ClickRow(record, event)
                                }
                            }}
                        />

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

             this.setState({
                BomPackSelectedRowKeys:[]
            })

​

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

  • 3
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以在表格外部添加一个复选框,并使用state来保存其选状态。然后在表格的列定义加入一个render函数,渲染出每行的复选框,并根据表格外的复选框状态来决定是否选。最后,在表格外的复选框的onChange事件,更新state,同时也更新表格所有复选框的选状态。 以下是一个示例代码: ```jsx import React, { useState } from 'react'; import { Table, Checkbox } from 'antd'; const dataSource = [ { key: '1', name: 'Mike', age: 32, address: '10 Downing Street' }, { key: '2', name: 'John', age: 42, address: '10 Downing Street' } ]; const columns = [ { title: '', dataIndex: 'selected', render: (text, record) => <Checkbox checked={record.selected} onChange={e => handleRowCheckboxChange(e, record)} /> }, { title: 'Name', dataIndex: 'name' }, { title: 'Age', dataIndex: 'age' }, { title: 'Address', dataIndex: 'address' } ]; const App = () => { const [selectAll, setSelectAll] = useState(false); const [data, setData] = useState(dataSource.map(item => ({ ...item, selected: false }))); const handleSelectAllChange = e => { const checked = e.target.checked; setSelectAll(checked); setData(data.map(item => ({ ...item, selected: checked }))); }; const handleRowCheckboxChange = (e, record) => { const checked = e.target.checked; setData(data.map(item => (item.key === record.key ? { ...item, selected: checked } : item))); setSelectAll(data.every(item => item.selected)); }; return ( <> <div> <Checkbox checked={selectAll} onChange={handleSelectAllChange}> Select All </Checkbox> </div> <Table dataSource={data} columns={columns} /> </> ); }; export default App; ``` 在这个示例,我们使用useState来维护表格外的复选框状态和表格数据的选状态。在表格列定义,我们通过render函数来渲染出每行的复选框,并根据表格数据的选状态来决定是否选。在表格外的复选框的onChange事件,我们更新state,同时也更新表格数据的选状态。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值