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>
    );
}