在 UI 中关闭模式对取消按钮做出反应

Question

我正在按照 https://react.semantic-ui.com/modules/modal 创建模态表单。

我想在单击 Cancel 按钮时关闭模态框。我被限制不使用上面 link 中建议的 shorthand 方法。我应该如何编写 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

我真的解决了。我在 state which 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 中关闭模式对取消按钮做出反应

Close Modal in UI React on Cancel button

javascript

reactjs

semantic-ui-react