在 React 应用程序中使用 jQuery 关闭 Bootstrap 模式

Question

我正在尝试在 React 中使用 Bootstrap 模态。我已经成功打开了一个模态。为了以编程方式关闭模式，我使用以下代码。

$('#exampleModal').modal('hide')

代码写在按钮的onClick事件中。当我点击按钮时，出现错误 Unhandled Rejection (TypeError): jquery__WEBPACK_IMPORTED_MODULE_6___default(...)(...).modal is not a function

我已经导入了 Bootstrap 和 jQuery 如下。

import 'bootstrap';
import $ from 'jquery';

如何解决这个问题？我如何在 React 中使用 jQuery 来关闭模式？

Answer 1

在使用 React 时使用 react-bootstrap 并尽量避免使用 JQuery。因为 JQuery 与 React 内部结构有点不同，如果我可以这样说的话。

在此示例中，您可以看到如何在组件状态内将其处理为 show 模态： https://react-bootstrap.github.io/components/modal/#modals-live

Close Bootstrap modal using jQuery in React application