Inverser le label suivant setState
Bonjour tout le monde. Voilà je rencontre un problème avec une des fonctions d'un composant que j'ai créer. Je met d'abord le code
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| class Incremantor extends React.Component {
constructor(props) {
super(props)
this.timer = null
this.state = {nb: 0, step: true}
}
incremant() {
this.setState((state, props)=>{state.step = false})
this.timer = window.setInterval(this.incr.bind(this), 1000)
}
stopIncremant () {
this.setState((state, props)=>{state.step = true})
window.clearInterval(this.timer)
}
click () {
return this.state.step? this.incremant() : this.stopIncremant()
}
incr() {
this.setState((state, props) => ({nb: state.nb + 1}))
}
label () {
return this.state.step ? 'play': 'pause'
}
render() {
return <div>
{this.state.nb}
<button onClick={this.click.bind(this)}>{this.label()}</button>
</div>
}
} |
Donc en gros c'est un timer qui démarre lorsque je clique sur le bouton et se stop lorsque je reclic dessus ce bouton a deux role: démarrer le timer ou arrêter le timer ce qu'il fait très bien. Seulement comme le bouton a deux rôle j'ai creer une fonction label qui change le texte du bouton en mettant soit pause soit play et à l'heure actuelle il change d'état une seule fois pour afficher pause lorsque je démarre le timer mais après play ne s'affiche plus. J'utilise setState pour modifier l'état de step aui est soit à true soit false et ainsi la label fonction modifie le texte du bouton selon l'etat de step (true ou false). Ça devrait marcher mais j'ai aucune idée de pourquoi ça ne marche pas. Je suis preneur de toute solution
