Question

我需要在React组件中包含一个文本输入，其初始值是从组件的道具传递的：

 <input value={this.props.value} type='text'/>

但输入不可编辑，React抱怨：

 Warning: Failed form propType: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field.

所以我添加一个onChange事件处理程序：

 <input value={this.props.value} type='text' onChange={this.valueChanged} />

我应该在valueChanged处理程序中做什么来更新输入值？我必须使用州吗？

Answer 1

查看表单上的文档，特别是controlled components。

处理更改事件的valueChanged()方法会执行以下操作：

valueChanged(event) {
  this.setState({
    value: event.target.value //set this.state.value to the input's value
  });
}

这意味着是的，您的输入值需要使用状态（this.state.value。）如果您希望从this.state.value填充this.props.value，您可以在构造：

constructor(props) {
  super(props);
  this.state = {
    value: props.value //passed prop as initial value
  }
  this.valueChanged = this.valueChanged.bind(this);
}

以上内容最初会将this.state.value设置为传递的道具value的值。然后将州和onChange处理程序中的值应用到<input>：

<input value={this.state.value} type="text" onChange={this.valueChanged} />

由于this.state.value是当前输入值，并且每次更改该值时都会更新，因此它可以按预期进行输入。

这是一个小提琴（谢谢，安德鲁）：http://jsfiddle.net/ow99x7d5/2

如何在React组件中包含指定值的文本输入？

1 个答案: