Javascript 在react中创建受控输入

我是个新手，正在学习如何使用FreeCodeCamp做出反应。关于这一挑战，它说：

在输入框中键入时，该文本由

handleChange（）

方法，设置为本地状态下的

input

属性， 并作为页面上输入框中的值呈现。组件 状态是输入数据的唯一真实来源

我写了这个解决方案：

 class ControlledInput extends React.Component {
constructor(props) {
  super(props);
  this.state = {
    input: ''
  };
  // Change code below this line
  this.handleChange = this.handleChange.bind(this);
  // Change code above this line
}
// Change code below this line
handleChange(event) {
  this.setState({
    input: event.target.value
  })
}
// Change code above this line
render() {
  return (
    <div>
      { /* Change code below this line */}
      <input value={this.state.input} onChange={this.handleChange()} />
      { /* Change code above this line */}
      <h4>Controlled Input:</h4>
      <p>{this.state.input}</p>
    </div>
  );
}
};

类ControlledInput扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
输入：“”
};
//更改此行下面的代码
this.handleChange=this.handleChange.bind（this）；
//更改此行上方的代码
}
//更改此行下面的代码
手变（活动）{
这是我的国家({
输入：event.target.value
})
}
//更改此行上方的代码
render（）{
返回(
{/*更改此行下方的代码*/}
{/*更改此行上方的代码*/}
受控输入：
{this.state.input}

);
}
};

控制台显示：

生成错误，请打开浏览器控制台以了解详细信息

---

我哪里做错了？我看不出我的错误。

您调用的是

handleChange

而不是将其引用作为

onChange

属性传递。

您调用的是

handleChange

而不是将其引用作为

onChange

属性传递。

您可能不需要在onChange属性中运行handleChange方法。所以你可以用这个来代替：

onChange={this.handleChange}

---

您可能不需要在onChange属性中运行handleChange方法。所以你可以用这个来代替：

onChange={this.handleChange}

---

该问题与如何将事件处理程序分配给

onChange

有关

onChange

需要一个回调函数，该函数将在输入值更改时触发。在您的帖子中使用

onChange={this.handleChange（）}

时，实际上是将

undefined

赋值给

onChange

，因为

handleChange

函数更新组件状态，但它不返回任何内容

将其更改为

onChange={this.handleChange}

实现您期望的功能。更改输入时，将调用

this.handleChange

，并将

事件

对象作为参数传入

---

希望这会有所帮助。

这个问题与如何将事件处理程序分配给

onChange

有关

onChange

需要一个回调函数，该函数将在输入值更改时触发。在您的帖子中使用

onChange={this.handleChange（）}

时，实际上是将

undefined

赋值给

onChange

，因为

handleChange

函数更新组件状态，但它不返回任何内容

将其更改为

onChange={this.handleChange}

实现您期望的功能。更改输入时，将调用

this.handleChange

，并将

事件

对象作为参数传入

---

希望这能有所帮助。

那不是真的。它不会分配

未定义的

，它会抛出，因为

事件

是

未定义的

。这不是真的。它不会分配

未定义的

，它会抛出，因为

事件

是

未定义的

。