Reactjs 反应-如何设置onChange直接改变道具？

我有以下接收变量并在屏幕上显示的代码：

<input type="number" value={this.state.cpf} onChange={this.handleChange} name="name" />

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

handleSignIn(event) {
        alert('A name was submitted: ' + this.state.cpf);
        event.preventDefault();
      }

---

如何使用此.setState更改onChange值？

与@extemp指出的一样，不会调用handleChange事件，因为它未绑定到

this

，因此必须使用绑定

有几种方法可以解决这个问题，根据您的代码约定，您可以将

this

关键字绑定到如下函数：

onChange={this.handleChange.bind(this)}

或者，您可以在触发onChange时执行该函数：

onChange={event () => this.handleChange(event)} // here i use the ES6 arrow function syntax.

注意：这些只是示例，您可以将此解决方案集成到您自己的项目中

还有其他几种方法，但这些是最常见的，我提供了一篇文章的链接，该文章解释了其他方法：

---

onChange

这里需要传递一个函数，该函数可以将事件作为参数注入。在您的

onChange

中，

target.value

将未定义，因为没有value

target

的引用

将其更改为以下应该可以解决此问题

onChange={(e) => {this.setState({ cpf: e.target.value})}

---

在这种情况下，

onChange

事件将具有一个函数，它可以将

事件

对象作为

e

传递，您可以执行您的功能。

您可以使用ES6箭头函数来执行此操作：

onChange={(event) => {
               this.setState({cpf: event.target.value});
          }
}

---

它工作得很好。。。祝你好运

onChange使用函数

onChange={event=>this.setState（{cpf:event.target.value}）}

应该执行此操作。渲染方法应该始终保持纯净。在渲染方法t中设置状态是一种非常糟糕的做法，并且更有可能产生副作用effects@lomse我试着不使用onChange方法，但我不能输入表单，你知道会发生什么吗？我想在不调用函数的情况下更改道具的值，因为我将使用更新后的值在API中发布帖子。表单输入是否具有类似于此的

属性？在渲染方法中设置状态不是一个好做法，因为渲染方法应该是pure@lomse正在执行事件时设置状态。这类似于为onChange事件分配处理程序。仍然是一种不好的做法。您能在这里为表单操作提供更好的选项，而不仅仅是说这是一种不好的做法吗？您给出的示例非常特定于具有副作用的异步调用或功能。至于表单操作，我想说我们可以在这里使用setState。

onChange={(event) => {
               this.setState({cpf: event.target.value});
          }
}