UI의 모달 닫기 취소 버튼에 대한 답변

Question

모달 양식을 만들려면 https://react.semantic-ui.com/modules/modal을 따르고 있습니다.

Cancel 버튼을 클릭하면 모달을 닫고 싶습니다. 위의 링크에서 제안 된 속기 방법을 사용하지 않도록 제한됩니다. 어떻게 Modal 폼을 닫으려면 handleClose() 함수를 작성해야합니까?

handleClose =() => { 
    console.log("close") 
} 

render(){ 
    return(
     <Modal trigger={<Button>Upload</Button>}closeIcon> 
     <Modal.Content> 
     <p>Please upload a valid file.</p> 
     <Form.Input 
      name="upload" 
      label="" 
      type="file" 
      onChange={e => 
      this.setState({file_data : e.target.files[0]})} 
     > 
     </Form.Input> 

     </Modal.Content> 
     <Modal.Actions> 
     <Button onClick = {this.handleClose}>Cancel 
     </Button> 
     <Button positive onClick = {this.handleUpload}>Upload 
     </Button> 
     </Modal.Actions> 
    </Modal> 
    ); 
    } 

Answer 1

실제로 해결했습니다. model_open : false 변수를 초기화하고 두 함수를 선언합니다.

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

handleClose =() => { 
    this.setState({ model_open: false }) 
} 

그런 다음이 메소드를 유즈 케이스에 따라 호출합니다.

render(){ 
    return(
    <Modal 
    trigger={<Button onClick={this.handleOpen}>Upload</Button>} 
    open={this.state.model_open} 
    onClose={this.handleClose} 
    closeIcon> 
    <Modal.Content> 
     <p>Please upload a valid file.</p> 
     <Form.Input 
     name="upload" 
     label="" 
     type="file" 
     onChange={e => 
      this.setState({file_data : e.target.files[0]})} 
     > 
     </Form.Input> 

    </Modal.Content> 
    <Modal.Actions> 
     <Button onClick = {this.handleClose}>Cancel 
     </Button> 
     <Button positive onClick = {this.handleUpload}>Upload 
     </Button> 
    </Modal.Actions> 
    </Modal> 
); 
}