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

小编典典

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

reactjs

在我的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)在构造函数中时，道具会正常注销。

当我console.log(this)是窗口对象时。如何获得react组件的范围？

阅读 210

2020-07-22

共1个答案

小编典典

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

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

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

方法遵循与常规ES6类相同的语义，这意味着它们不会自动将其绑定到实例。您必须显式使用.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
}}>

2020-07-22