antd中checkboxGroup包裹checkbox默认选中失效

场景描述：在React项目中使用Ant Design(版本：3.26.19)的Checkbox组件时，checkboxGroup包裹多个checkbox时，给单个checkbox设置checked或defaultChecked属性表示默认选中时均会失效，从官方文档中找到，可以给checkboxGroup设置defaultValue属性选择需要默认选中的checkbox。defaultValue接收string[]类型，数组中的值需要与checkbox的value值保持一致。

问题：设置defaultValue属性后checkbox默认选中依然未曾生效。
原因：defaultValue属性默认值为[]，初始渲染后，之后更新的值并不会使defaultValue属性发生变化，所以组件挂载完成后从后端请求到的数据不会作用到checkboxGroup组件上。
解决：需要给CheckboxGroup设置key属性，值与defaultValue属性值保持一致，key值发生变化组件会重新渲染，从而使更新后的defaultValue属性生效。
实现效果如下：

默认选中且不可选择
部分关键代码如下：

state = {
  tableNames: [], // 表名
  defaultVals: [], // 默认选中的值
  checkedData: [], // 选中的数据
}

// 截取部分后端返回的数据
// flag为true需要默认选中且不可选择
const data = [
  { value: "", name: "author_core", flag: false },
  { value: "作者录入说明", name: "Author_remark", flag: false },
  { value: "", name: "bs_hsk_hkhbalbsheet", flag: false },
  { value: "", name: "bs_hsk_hkhincstatement", flag: true },
  { value: "", name: "bs_hsk_indicdata", flag: true },
  { value: "", name: "bs_hsk_trade", flag: true },
  { value: "", name: "bs_pc_security_main", flag: true },
  { value: "", name: "bs_sk_forecast", flag: false },
  { value: "", name: "bs_sk_forecast_config", flag: false },
  { value: "", name: "bs_sk_forecast_config_old", flag: false },
];

// 请求到数据后的处理
if (data?.length > 0) {
  const tableNames = [];
  const defaultVals = [];
  data.forEach((item) => {
    tableNames.push(item);
    if (item.flag) {
      defaultVals.push(JSON.stringify({
        table_name: item.value,
        table_ename: item.name,
      }));
    }
  });
  this.setState({ tableNames, defaultVals });
} else {
  notification.warning({
    message: '搜索结果为空',
  });
}

// 组件布局
<Checkbox.Group
  key={this.state.defaultVals}
  defaultValue={this.state.defaultVals}
  onChange={checkedData => this.setState({ checkedData })}
>
  {this.state.tableNames.map((item) => {
    const text = `${item.value} ${item.name}`;
    const checkVal = {
      table_name: item.value,
      table_ename: item.name,
    };
    return (
      <Col key={text} span={24}>
        <Checkbox
          disabled={item.flag}
          value={JSON.stringify(checkVal)}
        >
          <span title={text}>{text}</span>
        </Checkbox>
      </Col>
    );
  })}
</Checkbox.Group>

我在最开始处理的时候，当defaultValue属性不生效时，使用value属性进行设置，但由于React受控组件的特性，需要对应的onChange事件进行响应，由此多出不少冗余代码和处理逻辑，并不推荐，仅供参考。

关键代码如下：

<Checkbox.Group
  value={this.state.defaultVals}
  onChange={checkedData => this.setState({ checkedData })}
>
  {this.state.tableNames.map((item) => {
    const text = `${item.value} ${item.name}`;
    const checkVal = {
      table_name: item.value,
      table_ename: item.name,
    };
    return (
      <Col key={text} span={24}>
        <Checkbox
          disabled={item.flag}
          value={JSON.stringify(checkVal)}
          onChange={({ target }) => {
            this.setState(({ defaultVals }) => {
              if (target.checked) {
                defaultVals.push(target.value);
              } else {
                defaultVals.forEach((it, i) => {
                  if (target.value === it) {
                    defaultVals.splice(i, 1);
                  }
                });
              }
              return { defaultVals };
            });
          }}
        >
          <span title={text}>{text}</span>
        </Checkbox>
      </Col>
    );
  })}
</Checkbox.Group>

最后编辑于：2021.08.18 22:12:41