1. 場(chǎng)景描述：在React項(xiàng)目中使用Ant Design(版本：3.26.19)的Checkbox組件時(shí)，checkboxGroup包裹多個(gè)checkbox時(shí)，給單個(gè)checkbox設(shè)置checked或defaultChecked屬性表示默認(rèn)選中時(shí)均會(huì)失效，從官方文檔中找到，可以給checkboxGroup設(shè)置defaultValue屬性選擇需要默認(rèn)選中的checkbox。defaultValue接收string[]類型，數(shù)組中的值需要與checkbox的value值保持一致。

• 問(wèn)題：設(shè)置defaultValue屬性后checkbox默認(rèn)選中依然未曾生效。

• 原因：defaultValue屬性默認(rèn)值為[]，初始渲染后，之后更新的值并不會(huì)使defaultValue屬性發(fā)生變化，所以組件掛載完成后從后端請(qǐng)求到的數(shù)據(jù)不會(huì)作用到checkboxGroup組件上。

• 解決：需要給CheckboxGroup設(shè)置key屬性，值與defaultValue屬性值保持一致，key值發(fā)生變化組件會(huì)重新渲染，從而使更新后的defaultValue屬性生效。

• 實(shí)現(xiàn)效果如下：

  
  
  默認(rèn)選中且不可選擇

• 部分關(guān)鍵代碼如下：

state = {
  tableNames: [], // 表名
  defaultVals: [], // 默認(rèn)選中的值
  checkedData: [], // 選中的數(shù)據(jù)
}

// 截取部分后端返回的數(shù)據(jù)
// flag為true需要默認(rèn)選中且不可選擇
const data = [
  { value: "", name: "author_core", flag: false },
  { value: "作者錄入說(shuō)明", 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 },
];

// 請(qǐng)求到數(shù)據(jù)后的處理
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: '搜索結(jié)果為空',
  });
}

// 組件布局
<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>

2. 我在最開(kāi)始處理的時(shí)候，當(dāng)defaultValue屬性不生效時(shí)，使用value屬性進(jìn)行設(shè)置，但由于React受控組件的特性，需要對(duì)應(yīng)的onChange事件進(jìn)行響應(yīng)，由此多出不少冗余代碼和處理邏輯，并不推薦，僅供參考。

• 關(guān)鍵代碼如下：

<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>