在其外部单击时关闭 reactstrap 模态答案

【问题标题】：Dismiss reactstrap modal when clicking outside of it在其外部单击时关闭 reactstrap 模态
【发布时间】：2019-02-01 05:53:24
【问题描述】：

我希望模式在单击外部时关闭，就像在示例中一样：https://reactstrap.github.io/components/modals/ 但它不会发生：

https://codesandbox.io/s/x9rx5jx34q

按下按钮，然后单击其他任何地方，没有任何反应。我的代码中也发生了同样的情况。

我尝试添加backdrop={true} 作为模态的道具，但没有奏效。

那么 reactstrap 在他们的例子中使用了什么？

【问题讨论】：

标签： javascript reactjs reactstrap

【解决方案1】：

您的依赖项中缺少 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

【讨论】：

我在我的应用程序的根目录中有它，这些导入在我的 packacge.json 中，你知道到底缺少什么吗？
@shinzou 我刚刚在package.json中添加了依赖，并在index.js中添加了CSS导入import 'bootstrap/dist/css/bootstrap.css';
我的意思是什么从 css 文件中改变了这种行为？
我不确定，我只是注意到在您提供的示例中，它看起来不像弹出窗口，它看起来像一个没有任何 CSS 的简单 div。
我的问题是我没有将切换功能发送到模态。

【解决方案2】：

引用 shinzou 的话，因为它也发生在我身上：

如果你设置了backdrop={true}你还必须设置toggle={fnToggle}否则它不会起作用。

【讨论】：

谢谢亲爱的，但这个解决方案对我不起作用。