React中如何基于数组值勾选复选框？多步骤表单恢复选中状态

问题说明 #

开发多步骤表单时，用户返回第三步页面后，复选框无法自动恢复之前选中的状态。目前已实现复选框选择时更新checkedBox数组并将其存入stepThree（全局store），但返回页面时复选框仍为未选中状态。尝试编写persistCheckmark函数判断选中状态，但不知如何触发，推测问题源于checkedBox初始化为空数组。

解决方案 #

1. 初始化时同步选中状态到checkedBox #

将checkedBox的初始值直接从全局store的stepThree中获取，确保进入页面时就拥有之前保存的选中数据：

this.state = {
  // 若store中无数据则默认空数组
  checkedBox: this.props.getStore().stepThree || [],
  stepThree: this.props.getStore().stepThree,
};

2. 完善复选框选择处理函数 #

补全handleCheckboxChange中添加/移除选中值的逻辑，确保状态更新正确：

handleCheckboxChange = (event) => {
  const selectedValue = event.target.value;
  this.setState(prevState => {
    let newCheckedBox;
    if (prevState.checkedBox.includes(selectedValue)) {
      // 移除已选中的选项
      newCheckedBox = prevState.checkedBox.filter(item => item !== selectedValue);
    } else {
      // 添加新选中的选项
      newCheckedBox = [...prevState.checkedBox, selectedValue];
    }
    return { checkedBox: newCheckedBox };
  });
};

3. 给复选框绑定checked属性 #

不需要单独的persistCheckmark函数，直接在复选框的checked属性中判断当前选项是否在checkedBox数组内：

<label className="choice-contain">
  <span>Checkbox Sample</span>
  <input
    value="Checkbox Sample"
    name="Question 3"
    type="checkbox"
    onChange={this.handleCheckboxChange}
    // 实时判断是否选中
    checked={this.state.checkedBox.includes("Checkbox Sample")}
  />
</label>

如果有多个复选框，建议通过循环渲染简化代码：

// 定义所有复选框选项
const checkboxOptions = ["Checkbox Sample", "选项2", "选项3"];

// 循环渲染
{checkboxOptions.map(option => (
  <label key={option} className="choice-contain">
    <span>{option}</span>
    <input
      value={option}
      name="Question 3"
      type="checkbox"
      onChange={this.handleCheckboxChange}
      checked={this.state.checkedBox.includes(option)}
    />
  </label>
))}

4. 修复store同步时的数组比较逻辑 #

由于数组是引用类型，直接用!=判断会出错，需比较数组内容是否一致：

if (Object.keys(validateNewInput).every(k => validateNewInput[k] === true)) {
  // 通过JSON序列化比较数组内容
  const isSelectionSame = JSON.stringify(this.props.getStore().stepThree) === JSON.stringify(this.state.checkedBox);
  if (!isSelectionSame) {
    this.props.updateStore({
      stepThree: this.state.checkedBox
    });
  } else {
    // 处理未修改选择的错误逻辑
  }
}

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