- 場景描述：在React項(xiàng)目中使用Ant Design(版本：3.26.19)的Checkbox組件時，checkboxGroup包裹多個checkbox時涣觉，給單個checkbox設(shè)置
checked或defaultChecked屬性表示默認(rèn)選中時均會失效嚷节，從官方文檔中找到乌庶，可以給checkboxGroup設(shè)置defaultValue屬性選擇需要默認(rèn)選中的checkbox怔毛。defaultValue接收string[]類型，數(shù)組中的值需要與checkbox的value值保持一致促王。
問題：設(shè)置
defaultValue屬性后checkbox默認(rèn)選中依然未曾生效犀盟。原因：
defaultValue屬性默認(rèn)值為[]，初始渲染后蝇狼，之后更新的值并不會使defaultValue屬性發(fā)生變化阅畴，所以組件掛載完成后從后端請求到的數(shù)據(jù)不會作用到checkboxGroup組件上。解決：需要給CheckboxGroup設(shè)置
key屬性迅耘，值與defaultValue屬性值保持一致贱枣，key值發(fā)生變化組件會重新渲染，從而使更新后的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: "作者錄入說明", 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 },
];
// 請求到數(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>
- 我在最開始處理的時候纽哥，當(dāng)
defaultValue屬性不生效時，使用value屬性進(jìn)行設(shè)置栖秕，但由于React受控組件的特性春塌，需要對應(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>
