ReactJS技术问询：如何以数组形式存储多选题表单状态？

我来帮你搞定这个多选题的状态存储问题～ 核心思路是针对多选类型（一般是checkbox）单独处理逻辑，把选中的值维护成数组，而不是单个值。具体修改步骤如下：

1. 修改handleChange方法，适配多选逻辑 #

原来的方法是直接覆盖单个值，现在要区分输入类型，对多选框做数组的添加/移除操作：

handleChange = (e, type) => {
  const { name, checked, value } = e.target;
  // 复制原状态，避免直接修改state（React状态不可变）
  let formValues = { ...this.state.formValues };

  if (type === 'checkbox') {
    // 处理多选逻辑：选中则添加，取消则移除
    if (checked) {
      // 如果当前字段还没有数组，先初始化为空数组再添加值
      formValues[name] = [...(formValues[name] || []), value];
    } else {
      // 过滤掉当前取消选中的选项值
      formValues[name] = (formValues[name] || []).filter(item => item !== value);
    }
  } else {
    // 普通输入类型（如text、radio等）保持原有逻辑
    const inputValue = this.fetchValue(e, type);
    formValues[name] = inputValue;
  }

  this.setState({ formValues });
}

2. 确保多选框的渲染正确 #

对于多选题的每个选项，要给每个checkbox设置唯一的value，并且所有选项共用同一个name（也就是你的module_question_id），这样它们的状态会被归集到同一个数组里。另外如果需要回显选中状态，要加上checked判断：

// 假设你的多选题选项存在this.props.questionInfo.options数组中
this.props.questionInfo.options.map(option => (
  <input
    className="form-control"
    type="checkbox"
    value={option.value} // 必须设置每个选项的value，用来标识选中项
    name={this.props.questionInfo.module_question_id}
    key={option.id} // 用选项的唯一id作为key
    onBlur={(e) => this.props.handleChange(e, 'checkbox')}
    // 回显已选中的状态：判断当前选项value是否在数组中
    checked={(this.props.formValues[this.props.questionInfo.module_question_id] || []).includes(option.value)}
  />
))

3. 初始化状态（可选但推荐） #

在组件的初始state里，把多选题对应的字段初始化为空数组，避免第一次操作时出现undefined的问题：

this.state = {
  formValues: {
    // 其他字段...
    [yourQuestionId]: [] // 这里的yourQuestionId就是对应的module_question_id
  }
};

这样修改后，当用户选择多个多选框时，对应的formValues字段就会存储一个包含所有选中值的数组，取消选中时会自动从数组中移除对应的值啦～

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