React.js ES6 すべてのメソッドに 'this' をバインドしないようにする。

質問

最近、React.jsをいじり始め、とても気に入っています。私は物事のコツを得るために、通常のES5で始めたので、ドキュメントはすべてES5で書かれています...

ES6はピカピカで新しいし、いくつかのことを単純化できるようなので、試してみたくなりました。私を悩ませるのは、コンポーネント クラスに追加したすべてのメソッドに 'this' をバインドする必要があり、そうしないと動作しないことです。そのため、私のコンストラクタはこのようになります。

constructor(props) {
  super(props);
  this.state = { ...some initial state... }

  this.someHandler = this.someHandler.bind(this);
  this.someHandler = this.someHandler.bind(this);
  this.someHandler = this.someHandler.bind(this);
  this.someHandler = this.someHandler.bind(this);
  this.someHandler = this.someHandler.bind(this);
  this.someHandler = this.someHandler.bind(this);
  this.someHandler = this.someHandler.bind(this);
}

もし私がこのクラスにさらに多くのメソッドを追加するとしたら、これはさらに大きく、醜い混乱になるでしょう。

私の質問は、これを回避する、あるいは少なくともより簡単に、より短く、より醜くなくする方法はあるかということです。私が ES6 で React を試したいと思った主な理由の 1 つは、私のコードをより簡潔にすることでしたが、これは逆のことをやっています。どんな提案や意見もありがたいです。

どのように解決するのですか？

あなたは クラスフィールド を使用してコンストラクタの外側でバインディングを行うことができます。それらは以下のようなものです。

class Foo extends React.Component {

  handleBar = () => {
    console.log('neat');
  };

  handleFoo = () => {
    console.log('cool');
  };

  render() {
    return (
      <div
        onClick={this.handleBar}
        onMouseOver={this.handleFoo}
      />
    );
  }

}

クラスフィールドは、Babel が実験的にサポートしている クラスプロパティトランスフォーム しかし、それらはまだ実験的なものであり、なぜならそれらは ステージ 3 ドラフト (まだバベルのプリセットにない)ためです。

しかし、ES7 または Babel で機能を有効にするまでは、手動でバインディングを行う必要があります。このトピックは、Babel のブログ記事で簡単にカバーされています。 ES6+ での React .