반응 Semantic UI - 트리거가없는 모달?

Question

트리거없이 모달을 사용할 수 있습니까? 나는 상태를 통해 그것을 열고 닫을 것이다. 예를 들어 입력 필드 (파일 이름 포함)에서 onClick을 사용하여 파일 선택기로 모달을 연 다음 입력 필드에서 선택한 파일의 이름을 편집하고 싶습니다. 내가 트리거없이 부모 구성 요소에서 모두 조동사이있을 것이다, 내가 표시/개방 = {참/거짓}

감사를 통해 숨길 경우이 모든 중첩 된 모달에 ... 훨씬 간단 보이는

Answer 1

예. 소품 트리거를 설정하지 마십시오 (필수는 아닙니다). 단지 상태/소품의 열린 값을 제공하십시오.

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

(당신은 둥지 모달 당신이 원하는 수있는 경우)