标签：Checkbox Group defaultValue Ant itemList labelCodes 默认值 页面

问题描述

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添加key为defaultValue的值**，即可当this.state.itemList.labelCodes变化时，页面可以取到数据更新之后的最新视图。

  
   <Checkbox.Group defaultValue={record.labelCodes} key={record.labelCodes}>
  
  

• 将defaultValue属性更改为value属性。

  
  <Checkbox.Group value={record.labelCodes} key={record.labelCodes}>
  
  

标签：Checkbox,Group,defaultValue,Ant,itemList,labelCodes,默认值,页面
来源： https://www.cnblogs.com/Scooby/p/16268973.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。