Sometimes I am really confused that when do I need to append .bind(this) to the method (ES5) or use arrow function (ES6)
e.g.
handleSubmit(e) {
console.log(this)
}
handleChange(e) {
console.log(this)
}
render() {
return (
<div className="col-sm-4">
<form onChange={e => this.handleChange(e)} onSubmit={e => this.handleSubmit(e)}>
<input type="text" name="user" placeholder="user"/>
<input type="text" name="comment" placeholder="comments"/>
<input type="submit" hidden/>
</form>
</div>
)
}
So if I want to access this inside handleChange and handleSubmit, then I have to use arrow function of onChange and onSubmit, otherwise the onChange and onSubmit can be changed as:
<form onChange={this.handleChange} onSubmit={this.handleSubmit}>
Am I right? thanks
Yes, you need to .bind each time when you pass your custom function to an event handler like onChange or onSubmit.
This is caused by the this context differences in React.createClass() vs extends React.Component.
Using React.createClass() will automatically bind this context (values) correctly, but that is not the case when using ES6 classes. When doing it the ES6 way (by extending React.Component) the this context is null by default. Properties of the class do not automatically bind to the React class (component) instance.
Btw .bind is not the only option available. See my answer here for a summary to all approaches I know.
PS: This is not a Redux specific thing, actually - nothing to do with how Redux works. That's a pure ReactJS related behavior.
Yes, you are right, of course if you mean that this is the context of your class. In my opinion using .bind in these cases is more clear, but I don't know if that's more efficient.
In your example you could either you arrow functions and make the form as you stated.
The other option is to have a constructor in which you bind.
constructor() {
super();
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
then your form would be
<form onChange={this.handleChange} onSubmit={this.handleSubmit}>