J'utilise un gestionnaire d'événements de clic qui appelle State State. Mais il semble que SetState provoque un déclencheur continu inattendu du gestionnaire d'événements de clic.
L'état est composé d'objet (contenant des minutes et des secondes) à diminuer lorsque je clique sur l'élément HTML. P>
render(){
return(
<div class="ml-5">
<h1>Test</h1>
<div>Session</div>
<div><strong id="session">{this.state.sessionLength.min}:{this.state.sessionLength.sec}</strong></div>
<div><i id="play" class="fa fa-play" onClick={this.startPomodoro()}></i> <i id="pause" class="fa fa-pause" onClick={this.pausePomodoro()}></i></div>
</div>
)
}
3 Réponses :
Vous appelez le gestionnaire ( startpomodoro () code>) au lieu de simplement le transmettre ( startpomodoro code>). Changez votre code à: <i id="play" class="fa fa-play" onClick={this.startPomodoro}></i> <i id="pause" class="fa fa-pause" onClick={this.pausePomodoro}></i>
Lorsque vous appelez un gestionnaire, vous avez deux options:
passer un rappel
Prenez en considération que si vous déclarez une fonction anonyme, cela peut entraîner des problèmes de performance, comme mentionné dans les documents: https://reactjs.org/docs/handling-events.html
Le problème avec cette syntaxe est qu'un rappel différent est créé chaque fois que le composant rend le composant. Dans la plupart des cas, c'est bien. Toutefois, si ce rappel est transmis comme un accessoire aux composants inférieurs, ces composants pourraient faire un re-rendu supplémentaire. Nous vous recommandons généralement de se lier dans le constructeur ou de la syntaxe des champs de classe pour éviter ce type de problème de performance.
onclick = {this.startpomodoro}
onclick = {() => this.startpomodoro ()}
En ce qui concerne les réponses ci-dessus, la fonction de flèche de passage ( onclick = {(() => this.startpomodoro ()} ) fonctionnera parfaitement.
Si vous passez un rappel, vous devez lier la fonction de rappel sur cette référence .
Comme ça:
onclick = {this.startpomodoro.bind (this)}