2017-09-18 2 views
3

に拘束されていない私はhandling-events documentationを以下のよ、と私はこの出くわし:JavaScriptでReactjs:JavaScriptでは、クラスメソッドはデフォルト

は、クラスメソッドはデフォルトに拘束されていません。 this.handleClickをバインドしてonClickに渡すのを忘れた場合、関数が実際に呼び出されるときには未定義になります。私はこの引用から理解何

thisは、すべてのクラスメソッドで、現在のインスタンスを指定していないということです。

しかし、私は以下のコード、thisを通じて拡張クラスParentのプロパティstateにアクセスすることができeditState方法を検討している場合。 thisはすべてのクラスのmehtodにバインドされているため、前の見積もりをfalseにします。

class Parent { 
 
    constructor() { 
 
    this.state = false; 
 
    } 
 
    
 
    setState(newState) { 
 
    this.state = newState; 
 
    } 
 
} 
 

 
class Child extends Parent { 
 
    editState() { 
 
    this.setState(true); 
 
    } 
 
} 
 

 
let c = new Child; 
 
c.editState(); 
 
console.log(c.state);

私はここで何をしないのですか?

+3

デフォルトでバインドされていないということは、あなたのメソッドをイベントのコールバックとして与えると( 'onClick = {this.editState}'など)、 'onClick'イベントはあなたの関数を別のコンテキストにバインドしますあなたのメソッドを正しいコンテキストで明示的にバインドする前に(コンストラクタ内の 'this.editState = this.editState.bind(this)'またはarrow関数を使用してください)。 editStateを自分で呼び出すと、通常は 'this'にアクセスできます。 –

答えて

0

関数がイベントハンドラとして使用されるとき、 'this'はイベントが発生した要素に設定されます。 As a DOM event handler

関連する問題