React中状态变更后如何让复选框UI显示为选中状态？

嘿，我懂你碰到的麻烦了——状态确实在按预期变化，但复选框就是不显示选中状态，核心问题其实是你的CheckBox组件的checked属性没和组件状态绑定，现在它一直固定是false，自然点击后UI不会跟着变。

咱们一步步来修复：

1. 调整状态结构，跟踪每个复选框的选中状态 #

首先得在组件的state里专门存每个复选框的选中状态，比如用一个对象来记录，键用复选框的name或者label，值是布尔值（代表选中/未选中）。初始状态可以这么写：

state = {
  usage: "",
  checkedItems: {} // 专门存储每个复选框的选中状态
};

2. 修改onCheck方法，同步更新选中状态 #

接下来更新你的onCheck函数，既要维护usage字段，也要切换对应复选框的选中状态：

onCheck = item => {
  this.setState(prevState => {
    // 切换当前点击项的选中状态
    const newCheckedItems = {
      ...prevState.checkedItems,
      [item.name]: !prevState.checkedItems[item.name]
    };

    // 重新生成usage字符串，只保留选中项的label
    const selectedLabels = Object.entries(newCheckedItems)
      .filter(([_, isChecked]) => isChecked)
      .map(([name]) => checkboxes.find(box => box.name === name).label);
    const newUsage = selectedLabels.join(",");

    return {
      checkedItems: newCheckedItems,
      usage: newUsage
    };
  });
};

3. 渲染时把checked属性绑定到状态 #

最后在渲染CheckBox的时候，把checked属性和state里对应的状态值绑定：

{checkboxes.map(item => (
  <div className="d-inline-block w-50 p" key={item.key}>
    <CheckBox 
      name={item.name} 
      checked={this.state.checkedItems[item.name] || false} // 绑定选中状态
      onChange={this.onCheck.bind(this, item)} 
    />
    <label>{item.label}</label>
  </div>
))}

你的基础CheckBox组件可以保留原样 #

这个基础组件本身没问题，不用做太多改动：

const CheckBox = ({ type = "checkbox", name, checked = false, onChange }) => (
  <input type={type} name={name} checked={checked} onChange={onChange} />
);

这样修改后，点击复选框时state里的checkedItems会同步更新，组件重新渲染时CheckBox的checked属性会跟着变化，UI就能正确显示选中状态啦～

内容的提问来源于stack exchange，提问作者Pedro Silveira