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

Question

在我的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当我使用form onSubmit时,由于某种原因不在范围内.当我console.log(this.props)在构造函数中时,props会正常注销.

当console.log(this)它是窗口对象.如何获得反应组分的范围？

Answer 1

这是一个更广泛的问题,因为当您使用其他组件事件时,您会注意到与此类似的行为(onClick,onChange,onSubmit)

在文档中有关于它的说明:

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

方法遵循与常规ES6类相同的语义,这意味着它们不会自动将其绑定到实例.你必须明确地使用.bind(this)或arrow functions =>.

如上所述,您必须绑定这些方法或使用箭头函数.如果选择绑定,则可以在构造函数中绑定或严格在渲染组件中绑定.

在构造函数中:

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
}}>