在 React 中触发 Bootstrap 模态而不使用 npm react-bootstrap

Question

我尝试使用 Bootstrap5 在 React.js 中编写 Modal，但由于多种原因我无法使用 npm react-bootstrap。我尝试了一种方法，使用状态来设置带有按钮的模态类，该按钮也适用于我的导航栏，但它不适用于我的模态。

import React, { useState } from "react";

const Modal = (props) => {
  const [modalTriggered, setModalTriggered] = useState(true);

  const handleModalTrigger = () => setModalTriggered(!modalTriggered);

  return (
    <React.Fragment>
      <button
        onClick={handleModalTrigger}
        aria-expanded={!modalTriggered ? true : false}
        className="btn btn-primary"
      >
        Trigger modal
      </button>

      <div>
        <div className={`modal ${modalTriggered ? "hide" : "show"}`}>
          <div className="modal-dialog">
            <div className="modal-content">
              <div className="modal-header">
                <h5 className="modal-title">Modal title</h5>
                <button type="button" className="btn-close"></button>
              </div>
              <div className="modal-body">
                <p>Modal body text goes here.</p>
              </div>
              <div className="modal-footer">
                <button
                  type="button"
                  className="btn btn-secondary"
                  data-bs-dismiss="modal"
                >
                  Close
                </button>
                <button type="button" className="btn btn-primary">
                  Save changes
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </React.Fragment>
  );
};

export default Modal;

我从 Bootstraps dodumentation 中了解到，“隐藏”或“显示”类用于触发模态，但唯一发生的事情是我的按钮在单击时更改“aria-expanded”。希望你们中有人知道我做错了什么，谢谢！ :-)

Answer 1

您可以通过设置“display”值来触发Modal，而不是直接将其传递给className。基本上，更换

 <div className={`modal ${modalTriggered ? "hide" : "show"}`}>

由

<div style={{ display: modalTriggered ? 'block' : 'none' }}>

将解决您的问题

Answer 2

JS

const [quizStartModal, setQuizStartModal] = useState(false);

 const showQuizModal = () => {
    setQuizStartModal(true);
    $('body').addClass('modal-open stop-scrolling');
  };

  const closeQuizModal = () => {
    setQuizStartModal(false);
    $('body').removeClass('modal-open stop-scrolling');
  };

/* ... */

<div
  className={`modal ${quizStartModal ? 'show' : ''}`}
  style={{
    display: quizStartModal ? 'block' : 'none',
    background: 'rgba(0, 0, 0, .8)',
  }}
  id="quizStartModal"
  data-bs-backdrop="static"
  data-bs-keyboard="false"
  tabIndex="-1"
  aria-labelledby="quizStartModalLabel"
  aria-hidden={quizStartModal ? undefined : 'true'}
  aria-modal={quizStartModal ? 'true' : undefined}
  role={quizStartModal ? 'dialog' : undefined}>

CSS

.stop-scrolling {
  height: 100%;
  overflow: hidden;
}