react 项目使用 Ant Design Table表格中使用Checkbox.Group 组件默认值 defaultValue变化页面不刷新

互联网 2022/5/14 6:24:32

问题描述 react 项目使用 Ant Design Table表格中使用Checkbox.Group 组件默认值 defaultValue变化页面不刷新。 const columns = [{title:标签,dataIndex:"labelCodes",key:"labelCodes",width:500,render:(text,record) =>(<Checkbox.Group d…

问题描述

react 项目使用 Ant Design Table表格中使用Checkbox.Group 组件默认值 defaultValue变化页面不刷新。

const columns = [
    {
        title:'标签',
        dataIndex:"labelCodes",
        key:"labelCodes",
        width:500,
        render:(text,record) =>(
            <Checkbox.Group defaultValue={record.labelCodes} key={record.labelCodes}>{
                    this.state.labelList.map(item => (
                        <Checkbox 
                            key={item.value} 
                            value={item.value} 
                            onChange={(e) => this.onChange(e,record.id)}>{item.label}</Checkbox>
                    ))
                }
            </Checkbox.Group> 
        )
    },

];


<Table columns={columns} dataSource={this.state.itemList} />

当接口请求返回的this.state.itemList数据发生变化时,传递给页面表格中的Checkbox.Group defaultValue的值发生变化但页面不能刷新。使用this.forceUpdate()以及setState({ itemList:[...itemList]})均没有效果。

解决办法

  • Checkbox.Group添加keydefaultValue的值**,即可当this.state.itemList.labelCodes变化时,页面可以取到数据更新之后的最新视图。

     <Checkbox.Group defaultValue={record.labelCodes} key={record.labelCodes}>
    
    
  • defaultValue属性更改为value属性。

    <Checkbox.Group value={record.labelCodes} key={record.labelCodes}>
    
    
随时随地学软件编程-关注百度小程序和微信小程序
关于找一找教程网

本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[react 项目使用 Ant Design Table表格中使用Checkbox.Group 组件默认值 defaultValue变化页面不刷新]http://www.zyiz.net/tech/detail-320800.html

赞(0)
关注微信小程序
程序员编程王-随时随地学编程

扫描二维码或查找【程序员编程王】

可以随时随地学编程啦!

技术文章导航 更多>