反应将输入值设置为状态数组中的值

Question

我有一个 React-Bootstrap FormControl，我正在尝试使用以下内容设置状态：

<FormGroup controlId={0} key={0} >
     <FormControl onChange={this.handleChange} value={this.state.form_answers[0]} />
 </FormGroup>

This.state.form_answers 在构造函数中设置如下：

this.state = ({
  form_answers : ['foo','bar','foo-bar'],
});

我的句柄更改功能正在使用以下内容更新状态：

handleChange(event) {
  let form_answers = this.state.form_answers;
  form_answers[parseInt(event.target.id)] = event.target.value;
  this.setState({
    form_answers : form_answers,
  });
}

状态正在正确更新，但输入字段上显示的值根本没有改变。我还收到以下错误消息：

warning.js:36 警告：FormControl 正在更改不受控制的输入 要控制的未定义类型。输入元素不应切换 从不受控制到受控制（反之亦然）。决定使用 一个受控或不受控的输入元素的生命周期 组件。

当我将FormControl 设置为以下内容时，它可以工作：

<FormGroup controlId={0} key={0} >
     <FormControl onChange={this.handleChange} value={this.state.form_answers[0]} />
 </FormGroup>


handleChange(event) {
  this.setState({
    my_test_state: event.target.value,
  });
}

但是，由于我正在动态创建多个 FormControl 元素，因此可行的解决方案是不可行的。不能将输入值设置为状态索引值吗？如果不可能，那么有人可以就如何最好地更新/设置动态创建的输入字段的值给我建议。

Answer 1

状态正在正确更新，但输入字段上显示的值完全没有变化

你确定吗？我进行了本地测试，但状态没有正确更新，因为controlId 是FormGroup 的属性，而不是FormControl。也就是说，FormControl 将继承其 id 的 controlId 值（如果未设置）。

当我在FormControl 中将controlId 切换为id 时，它按预期工作。