ES5 this.method n'est pas une fonction

Question

J'ai une classe de type 2 qui cible ES5. Je suis l'erreur dans la ligne d'objet dans la console quand je l'exécute. L'instruction switch fonctionne correctement, mais les méthodes increment() et decrrement() ne s'exécutent pas.

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

Assurez-vous de lier this à vos fonctions de telle sorte que la valeur de this sera ce que vous attendez lorsque vous appelez les fonctions:

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) { 
    // ... 
    } 
} 

Vous pouvez également utiliser les fonctions de flèche initialisés de propriété si vous préférez :

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