IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

React Discussion :

Inverser le label suivant setState


Sujet :

React

  1. #1
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    octobre 2020
    Messages
    10
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 24
    Localisation : Cameroun

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : octobre 2020
    Messages : 10
    Points : 16
    Points
    16
    Par défaut 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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 546
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 546
    Points : 39 091
    Points
    39 091
    Par défaut
    Bonjour,
    passe par cette écriture :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    incremant() {
      //this.setState((state, props)=>{state.step = false})
      this.setState({
        step: false
      })
      this.timer = window.setInterval(this.incr.bind(this), 1000)
    }
     
    stopIncremant() {
      //this.setState((state, props)=>{state.step = true})
      this.setState({
        step: true
      })
      window.clearInterval(this.timer)
    }

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. 'SHOW TABLES' marche pas sous postgresql !?
    Par fet dans le forum PostgreSQL
    Réponses: 4
    Dernier message: 13/05/2004, 09h28
  2. Maximiser fenêtre ne marche pas
    Par sandrinec dans le forum Composants VCL
    Réponses: 2
    Dernier message: 12/06/2003, 12h02
  3. Réponses: 9
    Dernier message: 07/05/2003, 12h57
  4. [GifDecoder] marche pas dans applet avec IE
    Par formentor dans le forum Applets
    Réponses: 2
    Dernier message: 06/05/2003, 10h43
  5. Sysdate qui marche pas ??
    Par StouffR dans le forum Langage SQL
    Réponses: 4
    Dernier message: 28/08/2002, 13h23

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo