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

Question

我需要在React组件中包含一个文本输入,其初始值从组件的props传递:

 <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

查看表单文档,特别是受控组件.

你的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的价值.然后将state和onChangehandler中的值应用到<input>:

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

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

这是一个小提琴(谢谢,安德鲁):http://jsfiddle.net/ow99x7d5/2