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

Question

我正在使用 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。

Answer 1

它确实有在名为 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 Spread Attributes