0
votes

Comment mettre à jour une valeur sans avoir besoin de double-cliquer sur le bouton? Réagir

Pour mon projet de jeu de nombres, je souhaite que la nouvelle valeur calculée s'affiche en un seul clic sur les boutons. Mais pour l'instant, je dois cliquer deux fois sur le même bouton pour que la nouvelle valeur s'affiche. Comment puis-je faire la mise à jour en un seul clic?

Celui que je souhaite être mis à jour:

Higher() {
  this.setState({
    min: this.state.guess,
    max: this.state.max,
    guess: ((this.state.min + this.state.max) / 2)
  });
};

Lower() {
  this.setState({
    max: this.state.guess,
    min: this.state.min,
    guess: ((this.state.min + this.state.max) / 2),  
  }); 
};

Mes boutons: p >

<button onClick={this.Higher.bind(this)}> Higher </button>
<button onClick={this.Lower.bind(this)}>Lower</button>

Leurs méthodes:

<p>Current guess: <strong>{Math.round(this.state.guess)}</strong></p>

Je soupçonne que le premier clic lance le calcul et le deuxième clic appelle le résultat.

Je suis nouveau dans ReactJS et je veux apprendre en refaisant d'anciens projets C # dans ReactJS.

reactjs button onclick

0 commentaires

3 Réponses :

0
votes

Je pense que le problème réside en fait dans votre logique de calcul "suppose" - le reste de votre code semble correct.

this.setState({
   min: newMin,
   max: this.state.max // No need for this!
});

Pour info, il est également préférable de faire votre .bind () dans le constructeur, pas dans le rendu - cela signifie qu'il ne s'exécutera qu'une seule fois. Consultez ce billet de blog pour plus d'informations a >.

Il est également intéressant de noter que vous n'avez pas besoin de mettre à jour une valeur d'état si la valeur est la même que l'état actuel. setState effectue de toute façon une fusion profonde d'états, il vous suffit donc de transmettre les données modifiées.

Higher() {
  const newMin = this.state.guess;
  const newGuess = (newMin + this.state.max) / 2;
  this.setState({
    min: newMin,
    guess: newGuess    
  });
}

Lower() {
  const newMax = this.state.guess;
  const newGuess = (this.state.min + newMax) / 2;

  this.setState({
    max: newMax,
    guess: newGuess      
  });
}

Fonctionnement exemple:

https://jsfiddle.net/daveSalomon/0ya729r4/7/

0 commentaires

0
votes

setState est asynchrone, il ne fonctionnera donc pas comme prévu. Ce que vous pouvez faire est d'appeler à nouveau setState en passant un rappel.

 Higher() {
    this.setState({
        min: this.state.guess,
        max: this.state.max,
    }, () => {
      this.setState({
        guess: ((this.state.min + this.state.max) / 2)
      }
    });
}
Lower() {
    this.setState({
       max: this.state.guess,
       min: this.state.min,
    }, () => {
      this.setState({
        guess: ((this.state.min + this.state.max) / 2),
      }
    });

}

0 commentaires

0
votes

Vous devez comprendre correctement setState.

setState () ne met pas toujours immédiatement à jour le composant. Il peut regrouper ou reporter la mise à jour à plus tard. Cela fait de la lecture de this.state juste après avoir appelé setState () un piège potentiel.

Plus de références sur setState

this.setState((state, props) => ({
            min:state.guess,
            max:state.max,
            guess: ((state.min + state.max) / 2)
}));

0 commentaires