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

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

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

因此，我添加了一个onChange事件处理程序：

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

---

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

看看表单文档，特别是

处理更改事件的

valueChanged（）

方法将执行以下操作：

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

这意味着是的，您的输入值需要使用state（

this.state.value

），如果您希望从

this.props.value

填充

this.state.value

，您可以在构造函数中执行类似操作：

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

上面将首先将

this.state.value

设置为传递的prop

value

的值。然后将state中的值和

onChange

处理程序应用于您的

：

由于

此.state.value

是当前的输入值，并且在每次更改该值时都会更新，因此它将按预期成为可输入的

---

这里有一把小提琴（谢谢，安德鲁）：

看看表单上的文档，特别是

处理更改事件的

valueChanged（）

方法将执行以下操作：

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

这意味着是的，您的输入值需要使用state（

this.state.value

），如果您希望从

this.props.value

填充

this.state.value

，您可以在构造函数中执行类似操作：

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

上面将首先将

this.state.value

设置为传递的prop

value

的值。然后将state中的值和

onChange

处理程序应用于您的

：

由于

此.state.value

是当前的输入值，并且在每次更改该值时都会更新，因此它将按预期成为可输入的

---

这是一把小提琴（谢谢，安德鲁）：

是的，你必须使用状态……是的，你必须使用状态……因为你打败了我；），如果你需要一个现场演示，下面是我整理的：@AndrewLi谢谢你的编辑。我修改了代码以删除

（event）=>this.valueChanged（event）

，因为它可以通过在构造函数中绑定

this.valueChanged

来解决。感觉有点地道。谢谢，非常有帮助。我想知道是否有一种不使用状态的方法，比如使用setProps（不推荐）。@ZackTanner当然，没问题：-）。@NeoWang这将是一种“反应方式”。我要说的是，任何其他方式都是不明智的。看看反应中的思考：既然你打了我；），如果你需要一个现场演示，下面是我整理的：@AndrewLi谢谢你的编辑。我修改了代码以删除

（event）=>this.valueChanged（event）

，因为它可以通过在构造函数中绑定

this.valueChanged

来解决。感觉有点地道。谢谢，非常有帮助。我想知道是否有一种不使用状态的方法，比如使用setProps（不推荐）。@ZackTanner当然，没问题：-）。@NeoWang这将是一种“反应方式”。我要说的是，任何其他方式都是不明智的。看看React中的思考：