Bootstrap的modal.toggle在react组件中不起作用

hc8w905p 于 2022-12-16 发布在 Bootstrap

关注(0)|答案(1)|浏览(165)

我想切换模态后，承诺是解决，这是触发按钮点击。根据官方文件modal.toggle()应该做的魔术，但它是行不通的。我用引导的版本5.2.2。我不能使用React引导。

import React from "react";
import { Modal } from "bootstrap";

const ExampleModal = () => {
  const toggleModal = () => {
    const myModalEl = document.getElementById('exampleModalToggle')
    const modal = new Modal(myModalEl);
    modal.toggle();
  };
  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">
              Show a second modal and hide this one with the button below.
            </div>
            <div className="modal-footer">
              <button
                onClick={toggleModal}
                className="btn btn-primary"
                data-bs-target="#exampleModalToggle2"
                // data-bs-toggle="modal" // wanted to toggle after a promise is resolved
              >
                Open second modal
              </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">
              Hide this modal and show the first with the button below.
            </div>
            <div className="modal-footer">
              <button
                className="btn btn-primary"
                data-bs-target="#exampleModalToggle"
                data-bs-toggle="modal"
              >
                Back to first
              </button>
            </div>
          </div>
        </div>
      </div>
      <a
        className="btn btn-primary"
        data-bs-toggle="modal"
        href="#exampleModalToggle"
        role="button"
      >
        Open first modal
      </a>
    </>
  );
};

export default ExampleModal;

字符串
我已经准备了上面的示例代码，并在沙盒上运行此代码。这也是无法切换模态。也是背景阴影越来越暗后，每个按钮点击。这是相同的行为，我在我的项目中遇到的。

twitter-bootstrap

来源：https://stackoverflow.com/questions/74408755/bootstraps-modal-toggle-is-not-working-in-react-component

1条答案

按热度按时间

abithluo1#

下面是为我工作的更新代码.

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

const ExampleModal = () => {
  const myModalEl1 = useRef(null);
  const myModalEl2 = useRef(null);
  const toggleModal = () => {
    // const myModalEl1 = document.getElementById("exampleModalToggle");
    const modal = Modal.getInstance(myModalEl1.current, {});
    modal.toggle();
    // const myModalEl2 = document.getElementById("exampleModalToggle2");
    const modal2 = Modal.getOrCreateInstance(myModalEl2.current, {});
    modal2.toggle();
  };
  return (
    <>
      <div
        className="modal fade"
        id="exampleModalToggle"
        ref={myModalEl1}
        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">
              Show a second modal and hide this one with the button below.
            </div>
            <div className="modal-footer">
              <button
                onClick={toggleModal}
                className="btn btn-primary"
                data-bs-target="#exampleModalToggle2"
                // data-bs-toggle="modal" // wanted to toggle after a promise is resolved
              >
                Open second modal
              </button>
            </div>
          </div>
        </div>
      </div>
      <div
        className="modal fade"
        id="exampleModalToggle2"
        aria-hidden="true"
        ref={myModalEl2}
        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">
              Hide this modal and show the first with the button below.
            </div>
            <div className="modal-footer">
              <button
                className="btn btn-primary"
                data-bs-target="#exampleModalToggle"
                data-bs-toggle="modal"
              >
                Back to first
              </button>
            </div>
          </div>
        </div>
      </div>
      <a
        className="btn btn-primary"
        data-bs-toggle="modal"
        href="#exampleModalToggle"
        role="button"
      >
        Open first modal
      </a>
    </>
  );
};

export default ExampleModal;

赞(0）回复(0）举报 2022-12-16

我来回答

Bootstrap的modal.toggle在react组件中不起作用

1条答案

相关问题

热门标签

最新问答