It gradually got simplified but nobody could agree about the behaviour of if this would _just work_ with existing functions via the `this` or the first argument, I think eventually the proponents if it grew tired of the battle, they couldn't get unified support for one way or the other.. interesting the pipeline operator has basically gone through the exact same issues, but seems to have had much more attention to it.
Ultimately I believe the bind operator was just too soon, generally at the time people were still trying to come to terms with what was a lot of new syntax coming to javascript, as well as react and similar things, now I think these chaining operators make a lot more sense to a lot more people.
handleChange = e => this.setState({ value: e.currentTarget.value })I can't imagine that there would EVER be a good reason not to have a method bound to the class. Now we've all been forced to learn this new property initializer syntax and add yet another babel dependency to facilitate it.
And if you've got a list of tens or hundreds of items, and you want a click handler for each, you quickly get to the point where all the extra overhead matters.
Like, for instance, in a React render function you could have
{things.map(thing => {
return <Thing onClick={e => this.handleClick(thingId) } />
})}
{things.map(thing => {
return <Thing onClick={this.handleClick.bind(this, thingId)} />
})}
I still see lots of people recommending #1 for this exact scenario, though. Maybe I'm just wrong, or maybe stuff like this is why I see so many SPAs consuming shocking amounts of memory.
I grant that using the fat arrow is probably fine for the scenario you mentioned though, with something like a text field. I don't think I've seen many pages with so many text fields that the extra overhead would even make a difference.
To avoid it, you can do (sorry for bad formatting):
class Thing extends React.Component {
handleClick = (thingId) => {
this.setState(/*stuff*/);
}
render() {
return <div>{things.map(thing => <Thing onClick=
{this.handleClick} />)}</div>
}
}
constructor(...args) {
super(...args);
this.handleClick = this._handleClick.bind(this);
}
_handleClick(thing) {
// stuff
} @autobind
handleClick: () -> { return this.member }