时间戳

首页 > 解决方案 > 如何在 React.js 中关闭 Bootstrap 5 模式？

reactjs - 如何在 React.js 中关闭 Bootstrap 5 模式？

问题描述

在 React.js 中使用Bootstrap 5 Modal，Modal 在单击按钮时打开。如果我们在模态框上有一个表单，需要执行一些验证，并允许在成功验证后提交表单 - 我们不能使用data-bs-dismiss="modal"提交按钮，因为它会立即关闭模态框。

现在，在成功提交表单时关闭模式的最佳方法是什么？

请提供不使用 jQuery 的解决方案，因为它已从 Bootstrap v5 中删除，也不建议与 React.js 一起使用。

此外，由于其 Virtual DOM 使用概念，许多人建议不要在 React 中使用 document.getElementByID 或 document.querySelector。

更新：可以通过在成功提交表单后单击关闭按钮的解决方法来实现它，如下所示。但仍在寻找理想的解决方案，如果有的话。

在构造函数中，创建了一个 ref：

this.closeModalRef = React.createRef();

在渲染中，为关闭按钮添加了这个引用：

<button type="button" className="btn btn-secondary" data-bs-dismiss="modal" id='closeModal' ref={this.closeModalRef}>Close</button>

在提交处理程序中，表单提交成功后：

this.closeModalRef.current.click();

标签： reactjsbootstrap-5bootstrap5-modal

解决方案

推荐阅读