201

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ます。

4

4 に答える 4

68

いいえ、バインドされたインスタンス固有のメソッドを作成する場合は、コンストラクターでそれを行う必要があります。.bindただし、プロトタイプメソッドで使用する代わりに、アロー関数を使用できます。

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

を省略して、同じ機能を持つクラス スコープに割り当てを直接配置することを許可する提案がありますが、非常に実験的であるため、それを使用することはお勧めしません。constructor()

または、いつでも を使用.bindできます。これにより、プロトタイプでメソッドを宣言し、コンストラクターでインスタンスにバインドできます。このアプローチでは、クラスの外部からメソッドを変更できるため、柔軟性が高くなります。

class SomeClass extends React.Component {
  constructor() {
    super();
    this.handleInputChange = this.handleInputChange.bind(this);
    …
  }
  handleInputChange(val) {
    console.log('selectionMade: ', val, this);
  }
}
于 2015-07-12T13:54:55.420 に答える