Reagiere Semantic UI - Modal ohne Trigger?

Question

Kann man ein Modal ohne Trigger verwenden? Ich werde es über den Staat öffnen und schließen. Zum Beispiel möchte ich onClick auf ein Eingabefeld (mit einem Dateinamen) verwenden, um das Modal mit einem Dateiauswahlprogramm zu öffnen und dann den Namen der ausgewählten Datei im Eingabefeld zu bearbeiten. All dies in einer verschachtelten modal ... Sieht viel einfacher, wenn ich beide Modalverben in einer übergeordneten Komponente haben wird ohne den Auslöser, und ich werde zeigen/verstecken sie über open = {true/false}

Dank

Answer 1

Ja ist es. Setzen Sie den Prop-Trigger nicht (es ist nicht erforderlich) und geben Sie nur den Open-Wert von State/Requisiten an.

class container extends Component { 
    state = { 
    isParentOpen: false, 
    isChildOpen: false 
    } 

    handleClick =() => { 
    this.setState({ 
     isParentOpen: !this.state.isOpen 
    }); 
    } 

    handleFocus =() => { 
    this.setState({ 
     isChildOpen: true 
    }); 
    } 

    render() { 
    return(
     <div> 
     <Modal 
      open={this.state.isParentOpen} 
      size="large" 
     > 
      ... 
      <Input onFocus={this.handleFocus} /> 
     </Modal> 
     <Modal 
      open={this.state.isChildOpen} 
      size="small" 
     > 
      ... 
     </Modal> 
     <Button onClick={this.handleClick} /> 
     </div> 
    ); 
    } 
} 

(Sie können Nest Modal wenn Sie wollen)