Bootstrap modal.toggle在React组件中失效问题求助

• 重复实例化Modal：每次点击按钮都创建新的Modal实例，Bootstrap会为每个实例生成独立的遮罩层，导致背景逐次变暗；同时新实例无法识别模态框当前状态，toggle()自然失效。
• 逻辑偏差：需求是关闭第一个模态框并打开第二个，而非切换第一个模态框的显示状态。

核心修复点 #

1. 用React useRef缓存Modal实例，确保全局仅一个实例管理模态框状态
2. 等待Promise执行完成后，通过模态框的异步事件确保切换流程的正确性
3. 组件卸载时销毁Modal实例，避免内存泄漏

import React, { useRef, useEffect } from "react";
import { Modal } from "bootstrap";

const ExampleModal = () => {
  // 缓存两个模态框的实例
  const modal1Ref = useRef(null);
  const modal2Ref = useRef(null);

  useEffect(() => {
    // 组件挂载时初始化Modal实例
    const modal1El = document.getElementById('exampleModalToggle');
    const modal2El = document.getElementById('exampleModalToggle2');
    
    modal1Ref.current = new Modal(modal1El);
    modal2Ref.current = new Modal(modal2El);

    // 组件卸载时销毁实例
    return () => {
      modal1Ref.current?.dispose();
      modal2Ref.current?.dispose();
    };
  }, []);

  // 模拟Promise操作（比如接口请求）
  const simulateAsyncTask = () => {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve('异步操作完成');
      }, 1000);
    });
  };

  const handleModalSwitch = async () => {
    try {
      // 等待Promise执行完成
      await simulateAsyncTask();
      
      // 先关闭第一个模态框，完全隐藏后再打开第二个
      modal1Ref.current.hide();
      modal1Ref.current._element.addEventListener('hidden.bs.modal', () => {
        modal2Ref.current.show();
      }, { once: true }); // 仅监听一次，避免重复绑定
    } catch (error) {
      console.error('异步操作失败:', error);
    }
  };

  return (
    <>
      <div
        className="modal fade"
        id="exampleModalToggle"
        aria-hidden="true"
        aria-labelledby="exampleModalToggleLabel"
        tabindex="-1"
      >
        <div className="modal-dialog modal-dialog-centered">
          <div className="modal-content">
            <div className="modal-header">
              <h1 className="modal-title fs-5" id="exampleModalToggleLabel">
                Modal 1
              </h1>
              <button
                type="button"
                className="btn-close"
                data-bs-dismiss="modal"
                aria-label="Close"
              ></button>
            </div>
            <div className="modal-body">
              点击按钮完成异步操作后切换到第二个模态框
            </div>
            <div className="modal-footer">
              <button
                onClick={handleModalSwitch}
                className="btn btn-primary"
              >
                完成异步操作并打开第二个模态框
              </button>
            </div>
          </div>
        </div>
      </div>
      <div
        className="modal fade"
        id="exampleModalToggle2"
        aria-hidden="true"
        aria-labelledby="exampleModalToggleLabel2"
        tabindex="-1"
      >
        <div className="modal-dialog modal-dialog-centered">
          <div className="modal-content">
            <div className="modal-header">
              <h1 className="modal-title fs-5" id="exampleModalToggleLabel2">
                Modal 2
              </h1>
              <button
                type="button"
                className="btn-close"
                data-bs-dismiss="modal"
                aria-label="Close"
              ></button>
            </div>
            <div className="modal-body">
              点击按钮返回第一个模态框
            </div>
            <div className="modal-footer">
              <button
                onClick={() => {
                  modal2Ref.current.hide();
                  modal2Ref.current._element.addEventListener('hidden.bs.modal', () => {
                    modal1Ref.current.show();
                  }, { once: true });
                }}
                className="btn btn-primary"
              >
                返回第一个模态框
              </button>
            </div>
          </div>
        </div>
      </div>
      <a
        className="btn btn-primary"
        data-bs-toggle="modal"
        href="#exampleModalToggle"
        role="button"
      >
        打开第一个模态框
      </a>
    </>
  );
};

export default ExampleModal;

关键说明 #

• 利用useRef保存Modal实例，避免重复初始化导致的遮罩叠加和状态混乱
• 通过hidden.bs.modal事件确保模态框完全隐藏后再切换，避免过渡动画冲突
• 移除了按钮上的data-bs-target属性，防止原生Bootstrap事件与自定义JS逻辑冲突

内容的提问来源于stack exchange，提问作者Ishan Trivid