javascript - 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

我实际上解决了它。我在 state 中初始化一个变量，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>
  );
}