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
}}>
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…