Semantic-ui-react: Wie trigge ich ein Popup ohne Klick/Hover?

Question

Wenn ich ein Formular abschicke, möchte ich ein kleines Popup für 2,5 Sekunden anzeigen, wenn der Server eine schlechte Antwort zurücksendet.

Die Logik ist ziemlich einfach, aber ich kann nicht herausfinden, wie dieses popup zu einem Boolean irgendwo in der Statusverwaltung (MobX in meinem Fall) zu hören. Ich kann den Inhalt gut in das Popup bekommen, aber der Auslöser ist eine Schaltfläche (und der Inhalt wird angezeigt, wenn Sie darauf klicken) - Aber wie mache ich es irgendwo einen booleschen Wert?

recht einfach Klasse hier:

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' 
       /> 
      ) 
     } 
    } 
} 

Allerdings ist der Auslösewert eine Schaltfläche, die wiedergegeben wird, wenn this.props.data vorhanden ist. Aber das ist nicht das Verhalten, das ich mir wünsche; Ich möchte einfach das Popup rendern (und damit triggern), wenn this.props.data da ist; alternativ kann ich einen true Wert mit Requisiten zur Verfügung stellen, wenn es sein muss.

Aber wie kann ich diese Komponente auslösen, ohne dass es ein Hover/Button ist?

Answer 1

Wie wäre es mit der isOpen Requisite? Dann könnte man eine gewisse Logik auf den componentWillReceiveProps Haken hinzu:

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' 
     /> 
    ) 
    } 
    } 
} 

Ohne Notwendigkeit der Verzögerung Handhabung - Sie einfach in der isOpen prop passieren könnte und das würde den Trick tun.

Und hier, wie es in Ihrer übergeordneten Komponente machen aussehen könnte:

diesen Wert

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

Set das Popup zu steuern, im Idealfall soll dies ein Teil Ihrer Elternkomponente des Staates sein. Eine statusbehaftete Komponente als Elternelement zu haben, ist wichtig, um das Popup neu gerendert zu machen.