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の変数を初期化し、2つの関数を宣言します。

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