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

单击React中的背景内容退出模态

1 个答案: