In Redux, when do I need to use .bind(this)

Question

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

Answer 1

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.