关闭模式在UI反应取消按钮

Question

我正在关注https://react.semantic-ui.com/modules/modal创建一个模态窗体。

点击Cancel按钮，我想关闭模态。我被限制不使用上面链接中建议的速记方法。我应该如何编写handleClose（）函数来关闭Modal表单？

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