ES5 this.methodは関数ではありません

Question

私はES5をターゲットとするtypescript 2クラスを持っています。私はそれを実行するとコンソールの件名にエラーが表示されます。 switch文は正常に動作しますが、increment（）メソッドとdecrement（）メソッドは実行されません。

class MyClass extends React.Component{ 
    ... 
    increment() { 
    console.log('increment()') 
    ... 
    } 
    decrement() { 
    console.log('decrement()') 
    ... 
    } 

    buttonClick(btn) { 
    console.log(btn) 
    switch (btn) { 
     case "prev": 
      console.log('switch prev') 
      this.decrement(); 
      //this.decrement; 
      break; 
     default: 
      console.log('switch next') 
      this.increment(); 
      //this.increment; eliminates err but method still doesnt execute 
      break; 
    } 
    } 
} 

Answer 1

thisの値は、あなたが関数を呼び出すときにあなたが期待するものになるように、あなたの関数にthisをバインドしていることを確認してください：

class MyClass extends React.Component{ 
    constructor() { 
    super() 
    this.increment = this.increment.bind(this) 
    this.decrement = this.decrement.bind(this) 
    this.buttonClick = this.buttonClick.bind(this) 
    } 
    increment() { 
    console.log('increment()') 
    } 
    decrement() { 
    console.log('decrement()') 
    } 
    buttonClick(btn) { 
    // ... 
    } 
} 

希望する場合は、また、プロパティ初期化矢印の機能を使用することができます：

class MyClass extends React.Component{ 
    increment =() => { 
    console.log('increment()') 
    } 
    decrement =() => { 
    console.log('decrement()') 
    } 
    buttonClick = (btn) => { 
    // ... 
    } 
}