React Semantic UI - トリガのないモーダル？

Question

トリガなしでモーダルを使用することはできますか？私は州を経由してそれを開いて閉じます。 たとえば、入力フィールド（ファイル名付き）でonClickを使用して、ファイル選択ツールでモーダルを開き、入力フィールドで選択したファイルの名前を編集したいとします。私は、トリガーなしで親コンポーネントの両方のモーダルを持つことになります、と私は表示されます/オープン= {真/偽}

おかげ経由でそれらを隠す場合は、すべてこれは、ネストされたモーダルで... は、はるかに簡単なルックス

Answer 1

はい、そうです。プロップトリガーを設定しないでください（必須ではありません）。単にstate/propsからオープン値を入力してください。

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> 
    ); 
    } 
} 

（あなたが巣モーダルは、あなたがしたいことができる場合）