Question

我有一个reactjs表单，其中值存储在状态中，如下所示

<input className="form-control" type="{inputType}" defaultValue="" name={this.props.questionInfo.module_question_id} key={this.props.questionInfo.module_question_id} onBlur={(e) => this.props.handleChange(e, inputType)} />

handleChange方法如下

handleChange = (e, type) => {
    let formValues = this.state.formValues;
    let value = this.fetchValue(e, type)
    formValues[e.target.name] = value;
    this.setState({formValues: formValues});
    console.log(this.state.formValues);
  }

现在我有一个可以有多个答案的问题。用户可以选择多个复选框作为答案。

格式应为

formValues: {
   questionid_1: ans1_id,
   questionid_2: ans2_id,
   .
   .
   questionid_5: [answer1_id, answer2_id....]  
}

问题是handlechange方法只查看当前元素。在这种情况下，需要对多个元素进行处理，并且需要生成相应的数组。

如何修改当前的方法？任何帮助将不胜感激。

Answer 1

您可能会认为将所有选项答案存储为数组格式，因此对于单选答案，数组将只有一个元素，对于多个答案，数组将有多个选项。您也可能需要相应地对问题进行分类并进行相关检查。

更新的代码看起来像这样。

这里我们确保formValues [e.target.name]是有效的数组。然后我们将最新值附加到此数组。因此，现在所有答案都是类型数组，提供跨问题答案的一致性。避免复杂性。

希望这有帮助，谢谢。

Reactjs - 多项选择题 - 将状态存储为数组

1 个答案: