Question

我有以下代码，该代码接收一个变量并显示在屏幕上：

<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();
      }

我想删除handleChange，以更改onChange中的直接道具，我尝试了一下，但是没有用：

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

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

Answer 1

就像@extempl指出的那样，未调用handleChange事件，因为它未绑定到this，因此您必须使用来绑定它。

有几种方法可以解决此问题，具体取决于您的代码约定，您可以将this关键字绑定到如下函数：

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

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

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

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

还有其他几种方法也可以，但是这些是最常见的一些方法，我提供了指向说明该方法的文章的链接，以及其他方法：

https://medium.freecodecamp.org/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56

Answer 2

onChange在这里需要传递一个函数，该函数可以将事件作为参数注入。在您的onChange中，target.value是未定义的，因为没有值target的引用。

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

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

在这种情况下，onChange事件将具有一个函数，该事件可以将event对象作为e传递，并且您可以执行功能。

Answer 3

您可以通过使用ES6箭头功能来做到这一点：

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

工作正常...祝您好运！

React-如何设置onChange直接更改道具？

3 个答案: