Reactをes6で使う場合のbindの問題

es6でReact.Componentを作成した場合
イベントハンドラでthisがundefinedになる

es5のReact.createClassを使った場合は、
イベントハンドラが自動でbindされるので大丈夫だった

es6

save(e){
	this.props // undefined　になる
}
render (){
	return (
		<button onClick={this.save} />保存</button>
	);
}

es5

save = function (e){
	this.props // undefined ではない
}
render = function (){
	return (
		<button onClick={this.save} />保存</button>
	);
}

解決策１

constructor内でbind

constructor() {
	super();
	this.save = this.save.bind(this);
}
render = function (){
	return (
		<button onClick={this.save} />保存</button>
	);
}

解決策 2

jsx内でbind

render = function (){
	return (
		<button onClick={this.save.bind(this)} />保存</button>
	);
}

解決策 ３

es6のアローファンクションを使う
eventを渡す必要がある

render = function (){
	return (
		<button onClick={(event) => this.save(event)} />保存</button>
	);
}

解決策 ４

es7の新しいbindシンタックスを使う
※これはwebstormで構文エラーになる

render = function (){
	return (
		<button onClick={::this.save} />保存</button>
	);
}