通过点击React中的背景内容退出模式

Exit modal by clicking on background content in React

本文关键字：背景 退出 模式 React      更新时间：2023-09-26

我正在使用react-bootstrap(文档:https://react-bootstrap.github.io/components.html#modals-props)，我不知道如何通过点击背景来关闭模态。

目前，我正在关闭它(不介意函数onCloseModal -它几乎关闭了模态):

<Modal closeButton={true} onHide={this.onCloseModal.bind(this)}>
    <Modal.Header closeButton={true} onHide={this.onCloseModal.bind(this)}>
    </Modal.Header>
</Modal>

没有关于如何通过点击背景关闭的文档。我很抱歉，我没有真正尝试过任何东西，但我已经在Stackoverflow和所有的解决方案都对应于jQuery，而不是React。

它确实有在文档中的props部分命名为backdrop

如果您熟悉Bootstrap，您可能知道描述单击进入背景操作时显示/隐藏模式的属性称为static backdrop。

点击背景来关闭一个模态。试试下面的代码:

<Modal {...this.props} backdrop="true">
    <Modal.Header closeButton>
        <Modal.Title id="contained-modal-title-sm">Modal heading</Modal.Title>
    </Modal.Header>
    <Modal.Body>
        <h4>Wrapped Text</h4>          
    </Modal.Body>
    <Modal.Footer>
        <Button onClick={this.props.onHide}>Close</Button>
    </Modal.Footer>
</Modal>

注意...this.props是JSX传播属性

相关文章：