我在Next.js上的应用程序中使用bootstrap 5.2 modals。我需要在成功返回请求后关闭模态窗口。我打开了属性为data-bs-toggle=“modal”的模态。使用文档和其他信息,我在组件中创建了一个函数:
export function LoginModal() {
const loginModalRef = useRef();
const hideModal = () => {
const { Modal } = require("bootstrap");
const myModal = new Modal(loginModalRef.current);
console.log(1,myModal,Modal)
myModal.hide();
};
function sendRequest() {
// if response success
hideModal();
}
return (
<>
<div ref={loginModalRef} id="login-modal" className="modal fade">
<div className="modal-dialog modal-dialog-centered">
<div className="modal-content">
<svg className="close-icon position-absolute pointer" data-bs-dismiss="modal">
<use xlinkHref="/images/sprite.svg#close-icon"></use>
</svg>
<div className="modal-body">
MyModalContetn
<div onClick={sendRequest}>Send</div>
</div>
</div>
</div>
</div>
</>
);
}
字符串
hide()方法不起作用,模式窗口保持打开状态,没有错误
Bootstrap已插入_app.js
const App = ({ Component, pageProps }) => {
// including bootstrap js
useEffect(() => {
require("bootstrap/dist/js/bootstrap.bundle.min.js");
}, []);
/////
型
你能告诉我我做错了什么,以及它应该如何在我的情况下工作吗?
1条答案
按热度按时间bvuwiixz1#
在Bootstrap中:
虽然Bootstrap CSS可以与任何框架一起使用,但Bootstrap JavaScript与React,Vue和Angular等JavaScript框架并不完全兼容。Bootstrap和框架都可能尝试改变相同的DOM元素,导致像下拉菜单这样的bug被卡在“打开”的位置。对于那些使用这种类型的框架的人来说,一个更好的选择是使用一个框架-特定的包而不是Bootstrap JavaScript。
在你的例子中,这个框架包应该是React Bootstrap。