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

【问题标题】：React - How to set onChange to change the props directly?React - 如何设置 onChange 直接更改道具？
【发布时间】：2018-11-17 19:04:16
【问题描述】：

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

<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中的直接props，我试过了，还是不行：

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

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

【问题讨论】：

onChange 需要一个函数
onChange={event => this.setState({ cpf: event.target.value })} 应该可以解决问题。
您的渲染方法应该始终保持纯净。在渲染方法 t 中设置状态是一种非常糟糕的做法，并且更有可能产生副作用
@lomse 我尽量不使用 onChange 方法，但是我不能输入表单，你知道会发生什么吗？我想在不调用函数的情况下更改道具的值，因为我将使用更新后的值在 API 中发帖。
您的表单输入是否有类似<input value={this.state.inputValue}> 这样的value 属性？

标签： reactjs forms

【解决方案1】：

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

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

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

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

【讨论】：

在渲染方法中设置状态不是一个好习惯，因为渲染方法应该是纯的
@lomse 在事件执行时设置状态。类似于将处理程序分配给 onChange 事件。
还是不好的做法stackoverflow.com/questions/35290245/…
您能否在这里提供一个更好的表单操作选项，而不是仅仅说这是一种不好的做法？您给出的示例非常特定于异步调用或具有副作用的功能。就表单操作而言，我想说我们在这里使用 setState 没问题。

【解决方案2】：

就像@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

【讨论】：

【解决方案3】：

您可以使用 ES6 箭头函数来做到这一点：

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

它工作正常......祝你好运！

【讨论】：