[解決済み】アロー関数（パブリッククラスフィールド）をクラスメソッドとして使用するには？

質問

私はReactでES6クラスを使うのが初めてです。これまではメソッドを現在のオブジェクトにバインドしていましたが（最初の例に示す）、ES6ではクラス関数を矢印でクラスインスタンスに恒久的にバインドできるのでしょうか。(コールバック関数として渡すときに便利です。)CoffeeScriptでできるように使おうとすると、エラーが発生します。

class SomeClass extends React.Component {

  // Instead of this
  constructor(){
    this.handleInputChange = this.handleInputChange.bind(this)
  }

  // Can I somehow do this? Am i just getting the syntax wrong?
  handleInputChange (val) => {
    console.log('selectionMade: ', val);
  }

ということで、もし私が SomeClass.handleInputChange に、例えば setTimeout を指定すると、クラスインスタンスにスコープされることになります。 window オブジェクトを作成します。

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

あなたの構文は少しずれており、プロパティ名の後に等号がないだけです。

class SomeClass extends React.Component {
  handleInputChange = (val) => {
    console.log('selectionMade: ', val);
  }
}

これは実験的な機能です。これをコンパイルするためには、Babelで実験的な機能を有効にする必要があります。 これ は、experimentalを有効にしたデモです。

babel で実験的な機能を使用するには、以下のサイトから関連するプラグインをインストールします。 こちら . この特定の機能を使用するには transform-class-properties プラグイン :

{
  "plugins": [
    "transform-class-properties"
  ]
}

クラス・フィールドとスタティック・プロパティに関する提案の詳細については、こちらをご覧ください。 こちら