Why is this not scoped in React form onSubmit function?

Question

In my React component I have a form with onSubmit function

<form className="form-horizontal" name="taskForm" onSubmit={this.submitTask}>

submitTask(e) {

  e.preventDefault();
  console.log(this.props);  // undefined
  console.log(this) // window object
}

For some reason this.props is not in scope when I use form onSubmit. When I console.log(this.props) in the constructor, props logs out normally.

When I console.log(this) it is the window object. How do I get the scope of the react component?

Answer 1

This is more broad problem, because similar behavior with this you will notice when you use other component events for example (onClick, onChange, onSubmit)

In documentation there is note about it:

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

Methods follow the same semantics as regular ES6 classes, meaning that they don't automatically bind this to the instance. You'll have to explicitly use .bind(this) or arrow functions =>.

As it is described you have to bind those methods or use arrow functions. If you choose binding, then you can bind in constructor or strictly in rendered component.

In constructor:

constructor(props) {
  super(props);
  this.submitTask = this.submitTask.bind(this);
}

In rendered component:

<form className="form-horizontal" name="taskForm" onSubmit={this.submitTask.bind(this)}>

With arrow function you can pass submitTask content to arrow function:

<form className="form-horizontal" name="taskForm" onSubmit={e => {
  e.preventDefault();
  console.log(this.props);  // undefined
  console.log(this) // window object
}}>