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

我需要在一个阵营组成的文本输入，从组件的道具通过其初始值：如何使用指定的值在React组件中包含文本输入？

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

但输入不可编辑，并作出反应抱怨：

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处理程序中做什么来更新输入值？我必须使用状态吗？

来源

2016-11-17 NeoWang

是的，你将不得不使用状态...... – Li357

查看窗体上的文档，特别是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

来源

2016-11-17 01:47:24

既然你打我），如果你需要一个现场演示，这里的东西我放在一起：HTTP： //jsfiddle.net/ow99x7d5/ – Li357

@AndrewLi感谢您的编辑。我修改了代码来移除'（event）=> this.valueChanged（event）'，因为它可以简单地通过在构造函数中绑定this.valueChanged来解决。感觉有点更习惯。 –

谢谢，非常有帮助。我想知道是否有没有使用状态的方式，如使用setProps（不推荐）。 – NeoWang

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

回答

相关问题