Ant Design多选框组件Checkbox动态默认初始选值

项目场景： 

希望实现基于react框架的家医后台管理系统的动态权限设置，通过不同的初始勾选来展示不同的角色拥有的权限。

 

---

问题描述

因为是初次使用这个组件，最开始时是根据Ant Design的官方文档在进行使用
采用的是Checkbox.Group 内嵌 Checkbox 并与 Grid 组件一起使用加以修饰美观：

import React from 'react';
import { Menu,Checkbox,Row, Col } from 'antd';

 

<Checkbox.Group  ref="jichu" style={{ width: '100%' ,margin:"20px auto"}} defaultValue={this.state.jichuvalue} onChange={this.onChange}>
      <Row>
         <Col span={4}>
             <Checkbox ref="xiaoxi" value="xiaoxi">消息管理</Checkbox>
         </Col>
      </Row>
      <Row>
         <Col span={4}>
             <Checkbox ref="xiaoxi" value="qianyue">签约管理</Checkbox>
         </Col>
      </Row>
      <Row>
         <Col span={4}>
             <Checkbox ref="xiaoxi" value="fuwu">服务管理</Checkbox>
         </Col>
      </Row>
      <Row>
         <Col span={4}>
             <Checkbox ref="xiaoxi" value="jumin">居民管理</Checkbox>
         </Col>
      </Row>
      <Row>
         <Col span={4}>
             <Checkbox ref="xiaoxi" value="jigou">机构管理</Checkbox>
         </Col>
      </Row>
</Checkbox.Group>

 我的本意是根据Checkbox.Group的defaultValue进行动态调整不同角色显示的不同权限，但后来发现了一个问题。

在我向服务器请求到数据后，我将得到的值进行判定，并把结果存进了state里。

componentDidMount=()=>{
    let _this=this
    axios.post('http://192.168.124.14:8888/IdentityArr.do', {})
              .then(function (resp) {
                if(resp.data[1].xiaoxi===1){
                     _this.setState({
                          jichuvalue: [...this.state.jichuvalue,xiaoxi]
                        })
                }
                if(resp.data[1].qianyue===1){
                     _this.setState({
                          jichuvalue: [...this.state.jichuvalue,qianyue]
                        })
                }
                if(resp.data[1].fuwu===1){
                     _this.setState({
                          jichuvalue: [...this.state.jichuvalue,fuwu]
                        })
                }
                if(resp.data[1].jigou===1){
                     _this.setState({
                          jichuvalue: [...this.state.jichuvalue,jigou]
                        })
                }
                if(resp.data[1].jumin===1){
                     _this.setState({
                          jichuvalue: [...this.state.jichuvalue,jumin]
                        })
                }
                }.catch(function (error) {
                console.log(error);
              })
      }
}

 原本是根据我的state的值的变动，来动态更新Checkbox.Group的defaultValue。

但后来发现即使我在render里测试过state的值已经改变，但是defaultValue的值始终只能为它的初始值，也就是我在state初始时给他的一个[]空数组。

---

原因分析：

百思不得其解，于是破罐子破摔使用错误的添加方法，

_this.setState({
	jigouvalue: _this.jigouvalue.push("xiaoxi");
})

结果发现这样可以改变，得出的结论是：

 Checkbox.Group的defaultValue只会识别第一次初始值的赋予

---

解决方案：

为了实现动态的状态选择，我决定另辟蹊径，将defaultValue设置为定值，对它的Checkbox的value值进行动态修改，借此来实现动态修改。

<Checkbox.Group  ref="jichu" style={{ width: '100%' ,margin:"20px auto"}} defaultValue={["xiaoxi","qianyue","fuwu","jumin","jigou"]} onChange={this.onChange}>
     <Row>
        <Col span={4}>
            <Checkbox ref="xiaoxi" value={this.state.xiaoxi} >消息管理</Checkbox>
        </Col>
        <Col span={4}>
            <Checkbox value={this.state.qianyue} >签约管理</Checkbox>
        </Col>
        <Col span={4}>
            <Checkbox value={this.state.fuwu}>服务管理</Checkbox>
        </Col>
        <Col span={4}>
            <Checkbox value={this.state.jumin}>居民管理</Checkbox>
        </Col>
        <Col span={4}>
            <Checkbox value={this.state.jigou}>机构管理</Checkbox>
        </Col>
    </Row>
 </Checkbox.Group>

再对请求后的数据修改加以更改：

componentDidMount=()=>{
           let _this=this
           axios.post('http://192.168.124.14:8888/IdentityArr.do', {})
              .then(function (resp) {
                   console.log(resp.data);

                if(resp.data[1].xiaoxi===1){
                     _this.setState({
                          xiaoxi: "xiaoxi"
                        })
                }else{
                    _this.setState({
                         xiaoxi: ""
                       })
                }

                if(resp.data[1].qianyue===1){
                    _this.setState({
                         qianyue: "qianyue"
                       })
               }else{
                   _this.setState({
                         qianyue: ""
                      })
               }
               if(resp.data[1].fuwu===1){
                    _this.setState({
                         fuwu: "fuwu"
                       })
               }else{
                   _this.setState({
                        fuwu: ""
                      })
               }
               if(resp.data[1].jumin===1){
                    _this.setState({
                         jumin: "jumin"
                       })
               }else{
                   _this.setState({
                    jumin: ""
                      })
               }
               if(resp.data[1].jigou===1){
                    _this.setState({
                         jigou: "jigou"
                       })
               }else{
                   _this.setState({
                        jigou: ""
                      })
               }.catch(function (error) {
                console.log(error);
              })

最终通过这样的方式实现了动态的初始值显示。如下图：