freeCodeCamp/guide/chinese/certifications/front-end-libraries/react/create-a-controlled-input/index.md

title	localeTitle
Create a Controlled Input	创建受控输入

创建受控输入

这里的想法是创建一个受控输入，其中文本从您的状态更新，而不是从浏览器更新。

首先，我们有一个骨架，其中我们有一个名为ControlledInput的类和一个名为input的状态变量。现在您需要做的就是采用该状态，当观察到输入框中的更改时，会触发一个函数，该函数会更改该输入框内及其下方段落中的值。

因此，您首先要制作一个更改状态变量input的函数。

handleChange(event) { 
    this.setState({ 
      input: event.target.value 
    }); 
 } 

现在，您的下一步将涉及创建一个输入框，并在有人输入任何内容时触发它。幸运的是，我们有一个名为onChange()的事件来实现此目的。 PS -这里是绑定的另一种方式this为功能

<input onChange = {this.handleChange.bind(this)}/> 

但这不符合你的目的。虽然你可能觉得它的工作原理。所以这里发生的是来自浏览器而不是状态的文本更新。所以为了纠正这个问题，我们将添加一个value属性并将其设置为this.state.input到input元素，这将使输入受状态控制。

<input value = {this.state.input} onChange = {this.handleChange.bind(this)}/> 

它可能有点难以消化，但为了使事情更清楚，请尝试删除整个onChange事物，以便您的代码看起来像这样

<input value = {this.state.input}/> 

现在再次运行测试你能输入什么吗？ 这个问题的答案将是“NO”，因为你的输入框中从状态变量中获得价值input ，因为在状态没有改变input （空字符串开始），当您触发功能，只会发生handleChange()这将只有在你有像onChange()这样的事件处理程序时才会发生，因此输入框内的字符串将保持不变，即空字符串。