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
    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é
    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
    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
    Même pas moyen de mettre un callback
    https://github.com/mui-org/material-...opover.js#L338

  5. #5
    Membre éprouvé
    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

###raw>template_hook.ano_emploi###