0
点赞
收藏
分享

微信扫一扫

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

思考的鸿毛 2021-09-30 阅读 128
  1. 场景描述:在React项目中使用Ant Design(版本:3.26.19)的Checkbox组件时,checkboxGroup包裹多个checkbox时,给单个checkbox设置checkeddefaultChecked属性表示默认选中时均会失效,从官方文档中找到,可以给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>
  1. 我在最开始处理的时候,当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>
举报

相关推荐

0 条评论