La fonction React.js ne se déclenche pas

Question

J'ai récemment vu un message d'avertissement s'afficher sur un de mes projets indiquant que la classe React.createClass est maintenant obsolète. Je passe donc en revue une partie du code pour le rendre compatible avec les nouvelles recommandations. Une chose que j'ai rencontrée, c'est que l'une de mes fonctions ne semble pas fonctionner comme avant.

class Example extends React.Component { 

    constructor() { 

     super(); 
     this.state = { content: "Initialize" } 

    } 

    changeScreen(newScreen) { 

     // this fires 
     alert("fired 01"); 

     // this function does not 
     this.testFunc; 

     var screen = ""; 

     switch(newScreen) { 
      case "one": 
       screen = "var01"; 
       break; 
      case "two": 
       screen = "var02"; 
       break; 
      default: 
       screen = "failed"; 
       break; 
     } 

    } 

    testFunc() { 
     alert("fired 02"); 
    } 

    render() { 

     return (
      <div> 
       <External.Element execChangeScreen={this.changeScreen} /> 
       {this.state.content} 
      </div> 
     ); 

    } 

} 

ReactDOM.render (
    <Example />, 
    document.getElementById("app") 
); 

Je ne peux pas sembler obtenir TestFunc au feu, je l'ai essayé d'appeler comme suit

this.testFunc(); 
this.testFunc; 
() => this.testFunc(); 

Je ne sais pas pourquoi, mais je pense qu'il peut avoir quelque chose à voir avec ce

MISE à JOUR

Toutes les réponses ci-dessous sont corrects, celui que je marqué comme accepté me semble la plus claire, mais grâce à everyon e pour leur aide

Answer 1

Vous devez définir explicitement l'intérieur thischangeScreen

Il faut donc utiliser

<External.Element execChangeScreen={this.changeScreen.bind(this)} /> 

au lieu de

<External.Element execChangeScreen={this.changeScreen} /> 

et appelez votre fonction

this.testFunc(); 

Answer 2

Maintenant que vous n'utilisez pas React.createClass, vous n'avez plus automatiquement this pour vous. Le problème est au point où this.changeScreen est appelée.

Le plus simple changement de votre code serait de lier dans le constructeur:

this.changeScreen = this.changeScreen.bind(this); 

Ensuite, assurez-vous d'appeler réellement votre fonction:

this.testFunc(); 

Si vous écrivez dans votre this.changeScreen.bind(this) Au lieu de la méthode render, vous créez une nouvelle copie de votre fonction à chaque fois que le composant est rendu.

Answer 3

Essayez TestFunc =() => {} ou lier dans la méthode constructeur comme this.testFunc = this.testFunc.bind (this)

Answer 4

Vous devrez exécuter changeScreen() dans le champ d'application correcte à l'aide une syntaxe de fonction de flèche.

<External.Element execChangeScreen={() => this.changeScreen('one')} /> 

Et dans la fonction changeScreen(), assurez-vous d'appeler TestFunc correctement.

changeScreen(newScreen) { 

    // this fires 
    alert("fired 01"); 

    // this function does not 
    this.testFunc(); 
    ... 
}