在Reactstrap模式之外单击时取消该模式

628mspwn 于 2022-10-15 发布在 React

关注(0)|答案(5)|浏览(220)

我希望模式在其外部单击时关闭，就像在示例中一样：https://reactstrap.github.io/components/modals/，但这不会发生：
https://codesandbox.io/s/x9rx5jx34q
按下按钮，然后单击其他任何位置，则不会有任何React。同样的事情也发生在我的代码中。
我试图添加backdrop={true}作为模型的道具，但不起作用。
那么，Reactstrap在他们的例子中使用了什么呢？

reactjs

来源：https://stackoverflow.com/questions/52026666/dismiss-reactstrap-modal-when-clicking-outside-of-it

5条答案

按热度按时间

wnrlj8wa1#

引用辛佐在我身上也发生的事情时说的话：
如果您设置了backdrop={true}，则还必须设置toggle={fnToggle}，否则它将不起作用。

赞(0）回复(0）举报 2022-10-15

x7rlezfr2#

您的依赖项中缺少bootstrap：

"dependencies": {
    "react": "16.4.2",
    "react-dom": "16.4.2",
    "react-scripts": "1.1.4",
    "reactstrap": "6.4.0",
    "bootstrap": "4.1.1"
  },

如文档中所述：https://github.com/reactstrap/reactstrap#adding-bootstrap
我在这里修改了您的示例：https://codesandbox.io/s/m73w9j289

赞(0）回复(0）举报 2022-10-15

vof42yt13#

import { Modal, ModalBody } from "reactstrap";

const [modal, setModal] = useState(false);

<Modal isOpen={modal} toggle={() => setModal(false)} >
<ModalBody>
....
<ModalBody>
</Modal>

赞(0）回复(0）举报 2022-10-15

iqjalb3h4#

您可以使用backdrop="static"和keyboard={false}，如图所示，它将解决问题

<Modal isOpen={isVisible} size='sm' toggle={() => setVisible(!isVisible)}  backdrop="static" keyboard={false}>

赞(0）回复(0）举报 2022-10-15

vzgqcmou5#

在模式中使用Backdown={‘Static’}，这样我们就可以控制外部的点击。在MODEL外部单击时，MODEL不会关闭。
例如：<模式isOpen={this.pros.isOpen}切换={this.pros.toggleModal}背景={‘静态’}>

赞(0）回复(0）举报 2022-10-15

我来回答

在Reactstrap模式之外单击时取消该模式

5条答案

相关问题

热门标签

最新问答