在我的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)在构造函数中时,道具会正常注销。
this.props
console.log(this.props)
当我console.log(this)是窗口对象时。如何获得react组件的范围?
console.log(this)
这是更广泛的问题,因为与此类似的行为在使用其他组件事件(例如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 }}>