小编典典

为什么这不在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组件的范围?


阅读 208

收藏
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