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

  1. #1
    Futur Membre du Club
    Homme Profil pro
    .
    Inscrit en
    février 2014
    Messages
    5
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : .
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : février 2014
    Messages : 5
    Points : 5
    Points
    5
    Par défaut Actualisation du component pas au bon moment
    Bonjour

    Je fais un component qui servirais pour un tour d'horizon dans une page web.
    Quand je clique sur le bouton Next le contenu de la popover s'actualise et ensuite ça position s'actualise.

    Ca ne rend pas ce que je souhaite, j'aurais voulu qu'elle bouge a la prochaine position et que le contenu s'actualise après.
    Si vous avez des idées je suis preneur, le code est ici:

    https://codesandbox.io/s/form-m1lf8

  2. #2
    Membre éprouvé
    Avatar de gwyohm
    Homme Profil pro
    Ingénieur avant-vente
    Inscrit en
    octobre 2007
    Messages
    825
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Ingénieur avant-vente

    Informations forums :
    Inscription : octobre 2007
    Messages : 825
    Points : 1 160
    Points
    1 160
    Par défaut
    Salut,

    J'ai regardé ton exemple, puis la doc de Popover puis le source de updatePosition
    Le souci, c'est que updatePosition passe par un debounce (pour ne pas freezer l'interface je suppose).

    Une solution simple pour ton cas, c'est de passer par une 2ème variable dans ton state:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
        this.state = {
          open: true,
          index: 0,
          indexData: 0,
          indexMax: guidelines.length - 1,
    De te baser sur celle-ci pour l'affichage de l'aide:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
              <Grid container style={styles.container}>
                <Grid item xs={12} style={styles.description}>
                  <Typography variant="h5">
                    {guidelines[this.state.indexData].title}
                  </Typography>
                  <Typography wrap="true">
                    {guidelines[this.state.indexData].description}
                  </Typography>
                </Grid>
    et de modifier cette variable une fois le updatePosition fait:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
     
      componentDidUpdate(prevProps, prevState) {
        if (this.state.index !== prevState.index) {
          this.inputRef.current.updatePosition();
          setTimeout(() => this.setState({indexData: this.state.index}), 300); //debounce fait un timeout à 166
        }
      }
    C'est pas top, mais comme updatePosition n'est pas une Promise, je doute que tu puisses savoir avec certitude quand le Popover a été déplacé...
    on ne dit pas "ça ne marche pas" on dit "je suis incapable de faire fonctionner correctement les outils mis à ma disposition"
    Pas de question technique par MP

  3. #3
    Futur Membre du Club
    Homme Profil pro
    .
    Inscrit en
    février 2014
    Messages
    5
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : .
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : février 2014
    Messages : 5
    Points : 5
    Points
    5
    Par défaut
    Merci, en effet c'est bien une solution, elle est sale mais elle fonctionne donc c'est plutôt bien.
    Dans ton commentaire du met "debounce fait un timeout à 166", tu sais ça comment ?

  4. #4
    Futur Membre du Club
    Homme Profil pro
    .
    Inscrit en
    février 2014
    Messages
    5
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : .
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : février 2014
    Messages : 5
    Points : 5
    Points
    5
    Par défaut
    Même pas moyen de mettre un callback
    https://github.com/mui-org/material-...opover.js#L338

  5. #5
    Membre éprouvé
    Avatar de gwyohm
    Homme Profil pro
    Ingénieur avant-vente
    Inscrit en
    octobre 2007
    Messages
    825
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Ingénieur avant-vente

    Informations forums :
    Inscription : octobre 2007
    Messages : 825
    Points : 1 160
    Points
    1 160
    Par défaut
    Citation Envoyé par bouh31 Voir le message
    Dans ton commentaire du met "debounce fait un timeout à 166", tu sais ça comment ?
    https://github.com/mui-org/material-...debounce.js#L3
    on ne dit pas "ça ne marche pas" on dit "je suis incapable de faire fonctionner correctement les outils mis à ma disposition"
    Pas de question technique par MP

Discussions similaires

  1. GIF wait ne se lance pas au bon moment
    Par merlin1977 dans le forum AWT/Swing
    Réponses: 5
    Dernier message: 15/04/2015, 15h01
  2. [ACCESS SQL] UNION renvoie pas le bon nb de lignes
    Par le lynx dans le forum Langage SQL
    Réponses: 2
    Dernier message: 29/06/2006, 11h57
  3. Requête UNION renvoie pas le bon nombre de lignes
    Par le lynx dans le forum Contribuez
    Réponses: 2
    Dernier message: 29/06/2006, 11h52
  4. getParent() ne retourne pas le bon parent avec JMenuItem
    Par kesiahlex dans le forum AWT/Swing
    Réponses: 5
    Dernier message: 20/04/2006, 16h19

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