在 React 中停止在外部单击时关闭模式答案

【问题标题】：Stop closing of modal on outside click in React在 React 中停止在外部单击时关闭模式
【发布时间】：2020-11-24 04:56:28
【问题描述】：

我将 react-bootstrap 用于模态组件。

这是我的导入代码。


import React from "react";
import Modal from "react-bootstrap/Modal";
import ModalBody from "react-bootstrap/ModalBody";
import 'bootstrap/dist/css/bootstrap.css';

模态的当前行为是当有人在模态内容之外单击时。它会自动关闭。我想停止这种行为。我尝试了 Stack Overflow 帖子中建议的多种方法，但都失败了。

模式代码


<Modal data-backdrop="static" shouldCloseOnOverlayClick={false} data-keyboard="false" show={this.state.modalIsOpen} onHide={this.toggleModal} id={this.props.modalId} centered>
        <ModalBody style={style}>
            <h3 className="heading color-white">Please Wait</h3>
            <CustomLoader />

        </ModalBody>
      </Modal>

【问题讨论】：

尝试从data-backdrop="static" 中删除data-？

标签： reactjs typescript bootstrap-4 react-bootstrap

【解决方案1】：

您的 Modal 道具错误，Modal 组件有一个名为 background="static" 的道具来更改背景点击时的行为：

<Modal
    show={show}
    onHide={handleClose}
    backdrop="static"
    keyboard={false}>
</Modal>

【讨论】：