Semantic-ui-react: Comment déclencher un Popup sans qu'il soit cliqué/planant?

Question

Lors de la soumission d'un formulaire, je souhaite afficher une petite fenêtre pendant 2,5 secondes si le serveur renvoie une mauvaise réponse.

La logique est assez simple, cependant, je ne peux pas comprendre comment faire de cette popup écouter un booléen quelque part dans la gestion d'état (MobX dans mon cas). Je peux obtenir le contenu dans le Popup très bien, cependant, le déclencheur est un bouton (et le contenu montrera, si vous cliquez dessus) - Mais comment puis-je le faire écouter une valeur booléenne quelque part?

classe assez simple ici:

import React from "react"; 
import { Popup, Button } from "semantic-ui-react"; 
import { inject } from "mobx-react"; 
const timeoutLength = 2500; 

@inject("store") 
export default class ErrorPopup extends React.Component { 

    state = { 
     isOpen: false 
    }; 

    handleOpen =() => { 
     this.setState({ 
      isOpen: true 
     }); 

     this.timeout = setTimeout(() => { 
      this.setState({ 
       isOpen: false 
      }) 
     }, timeoutLength) 
    }; 

    handleClose =() => { 
     this.setState({ 
      isOpen: false 
     }); 
     clearTimeout(this.timeout) 
    }; 

    render() { 

     const errorContent = this.props.data; 


     if(errorContent){ 
      return(
       <Popup 
        trigger={<Button content='Open controlled popup' />} 
        content={errorContent} 
        on='click' 
        open={this.state.isOpen} 
        onClose={this.handleClose} 
        onOpen={this.handleOpen} 
        position='top center' 
       /> 
      ) 
     } 
    } 
} 

Cependant, la valeur de déclenchement est un bouton qui est rendu si this.props.data est présent. Mais ce n'est pas le comportement que je souhaite; Je veux simplement que le popup rende (et donc déclenche) si this.props.data est là; alternativement, je peux fournir une valeur true avec des accessoires si nécessaire. Mais comment faire pour que ce composant se déclenche sans que ce soit un bouton ou un bouton de survol?

Answer 1

Que diriez-vous de passer dans le support isOpen? Ensuite, vous pouvez ajouter une certaine logique sur le crochet componentWillReceiveProps:

import React from "react"; 
import { Popup, Button } from "semantic-ui-react"; 
import { inject } from "mobx-react"; 
const timeoutLength = 2500; 

@inject("store") 
export default class ErrorPopup extends React.Component { 

constructor(props) { 
    super(props); 
    this.state = { 
    isOpen: false, 
    } 
}; 

    //This is where you trigger your methods 
    componentWillReceiveProps(nextProps){ 
    if(true === nextProps.isOpen){ 
     this.handleOpen(); 
    } else { 
     this.handleClose(); 
    } 
    } 

    handleOpen =() => { 

    this.setState({ 
     isOpen: true 
    }); 

    this.timeout = setTimeout(() => { 
     //No need to repeat yourself - use the existing method here 
     this.handleClose(); 
    }, timeoutLength) 
    }; 

    handleClose =() => { 
    this.setState({ 
     isOpen: false 
    }); 
    clearTimeout(this.timeout) 
    }; 

    render() { 

    const errorContent = this.props.data; 

    if(errorContent){ 
     return(
     <Popup 
      trigger={<Button content='Open controlled popup' />} 
      content={errorContent} 
      on='click' 
      open={this.state.isOpen} 
      position='top center' 
     /> 
    ) 
    } 
    } 
} 

Sans besoin de gérer retard - vous pouvez simplement passer l'hélice isOpen et qui ferait l'affaire.

Et voici ce qu'il pourrait ressembler dans votre rendu de composant parent:

let isOpen = this.state.isOpen; 
<ErrorPopup isOpen={isOpen}/> 

Définissez cette valeur pour contrôler le menu contextuel, idéalement, cela devrait être une partie de l'état de votre composant parent. Il est important de disposer d'un composant stateful en tant que parent pour que le popup soit rendu de nouveau