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
}

由于某些原因，当我使用表单onSubmit时，this.props不在范围内。当我在构造函数中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 =＆gt;。

如上所述，您必须绑定这些方法或使用箭头功能。如果选择绑定，则可以在构造函数中绑定，也可以在绑定的组件中绑定。

在构造函数中：

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

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

1 个答案: