javascript - 可以在需要时成功打开模态但无法关闭

Question

我正在尝试使用 React boostrap modal，我可以在需要时成功打开它，但我无法关闭它。我不知道我做错了什么。

我的标记

```                <Modal show={this.props.show} >
                    <Modal.Header>
                        <Modal.Title>Enter Log</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                        Hello i am Modal!!!!!
                    </Modal.Body>
                    <Modal.Footer>
                    <Button onClick={() => {closeModal()}}  variant="primary"> Close </Button>
                    </Modal.Footer>```

状态：

constructor(props) {
    super(props)   
    this.state = {
      closeModal: false
    }
}

处理函数：

const closeModal = () => {
    this.setState({closeModal: true}); 
}

标签： javascriptreactjs

Answer 1

您需要使用相同的条件来检查是否呈现模态

您props用于检查您的模态是否应该呈现，并且在关闭它时，您设置state为 false。

如果你想使用props，你需要更新你的道具，使用 redux 并调度一个动作或其他什么

根据你的 handleClose 功能，你需要检查state而不是props在条件

const closeModal = () => { this.setState({closeModal: true}); }

<Modal show={this.props.show} >
                <Modal.Header>
                    <Modal.Title>Enter Log</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    Hello i am Modal!!!!!
                </Modal.Body>
                <Modal.Footer>
                <Button onClick={() => this.closeModal()} variant="primary"> Close </Button>
                </Modal.Footer>