为什么这不在 React 形式的 onSubmit 函数范围内？答案

【问题标题】：Why is this not scoped in React form onSubmit function?为什么这不在 React 形式的 onSubmit 函数范围内？
【发布时间】：2016-03-09 15:48:00
【问题描述】：

在我的 React 组件中，我有一个带有 onSubmit 功能的表单

<form className="form-horizontal" name="taskForm" onSubmit={this.submitTask}>

submitTask(e) {

  e.preventDefault();
  console.log(this.props);  // undefined
  console.log(this) // window object
}

由于某种原因，this.props 在我使用表单 onSubmit 时不在范围内。当我在构造函数中console.log(this.props) 时，props 正常注销。

当我console.log(this) 时，它是窗口对象。如何获取 react 组件的作用域？

【问题讨论】：

onSubmit={this.submitTask.bind(this)}。 Link.
Tahir 是正确的，但我建议在您的构造函数中绑定函数，而不是在 render 方法中，以便它只绑定一次，而不是每次调用 render。另一种没有绑定的方法是onSubmit={event => this.submitTask(event, this.props)}
@azium 的回答应该是正确的答案...您可以完全访问道具、功能和所有内容。

标签： reactjs

【解决方案1】：

这是一个更广泛的问题，因为当您使用其他组件事件（例如，onClick、onChange、onSubmit）时，您会注意到与此类似的行为

在文档中有关于它的注释：

https://facebook.github.io/react/docs/reusable-components.html#no-autobinding

方法遵循与常规 ES6 类相同的语义，这意味着它们不会自动将 this 绑定到实例。您必须明确使用 .bind(this) 或箭头函数 =>.

如前所述，您必须绑定这些方法或使用箭头函数。如果选择绑定，则可以在构造函数中绑定，也可以严格在渲染组件中进行绑定。

在构造函数中：

constructor(props) {
  super(props);
  this.submitTask = this.submitTask.bind(this);
}

在渲染组件中：

<form className="form-horizontal" name="taskForm" onSubmit={this.submitTask.bind(this)}>

使用箭头函数，您可以将 submitTask 内容传递给箭头函数：

<form className="form-horizontal" name="taskForm" onSubmit={e => {
  e.preventDefault();
  console.log(this.props);  // undefined
  console.log(this) // window object
}}>

【讨论】：