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

关闭UI中的模态在“取消”按钮上的“反应”

1 个答案: