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如果未设置controlId，则会继承其id值。

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

React将输入值设置为状态数组

1 个答案: