With React ES6 syntax class methods are not bind to the instance context

[vladmiller]

Here is the example

http://jsbin.com/citafaradu/2/edit?js,console,output

[waldreiter]

React's ES6 classes have no autobinding. This is documented here: https://facebook.github.io/react/docs/reusable-components.html#no-autobinding

The reason is that javascript's ES6 classes have no autobinding neither. React tries to not reinvent stuff that is already in javascript. ES5 has no nice syntax for classes, so React had to invent it's own classes. But now with ES6 classes we can just use standard javascript.

[vladmiller]

Yeah, so this is sort of confusing

You'll have to explicitly use .bind(this) or arrow functions =>.

And here was my problem http://stackoverflow.com/questions/30726162/how-to-properly-bind-current-object-context-in-es6-using-babelify

And it turns out that arrow functions is invalid syntax in ES6 classes

[waldreiter]

That means that you can do either

<input type="text" onChange={this.handleChange.bind(this)} />

or

<input type="text" onChange={(e) => this.handleChange(e)} />

or

<input type="text" onChange={(e) => this.setState({ demo: e.target.value })} />

[vladmiller]

Still kind of ugly, huh? Ok man, thanks, I think it's better then binding contexts in constructor

[BerkeleyTrue]

You could also use es7 bind prefix operator

<input type="text" onChange={ ::this.handleChange } />

@vladmiller If that works for you please close this issue.

[gaearon]

#3040
#3509
#3090

[zpao]

This was called out in all of our documentation about ES6 classes and there are a number of issue on it. Closing this out but feel free to follow along in one of the other places.

[Ajju2211]

Different ways of binding
Within the constructor
constructor(props) {
super(props);
this.state = {
someValues:""
};

this.handleBindedChange = this.handleBindedChange.bind(this);

}
or

or

<input type="text" onChange={(e) => this.handleChange(e)} />
or

<input type="text" onChange={(e) => this.handleChange.bind(this)(e)} />

or

<input type="text" onChange={(e) => this.handleChange.bind(this,e)()} />

or use arrow functions for handlers

handleChange = (e) => {
this.setState({
someValues: e.target.value
});
}