模态不适用于我的 React 项目（使用 bootstrap）

Question

我想在我的项目中使用 bootstrap 模态，所以我使用了这段代码：我在 data-bs-target 和 id

上使用了相同的 id


    {/* modal start */}
    <div
        id="small_modal"
        className="modal fade"
        role="dialog"
        aria-labelledby="mySmallModalLabel"
        aria-hidden="true"
      >
        <div className="modal-dialog modal-sm">
          <div className="modal-content shadow-max">
            <div className="modal-header">
              <h3 className="modal-title" id="exampleModalLabel1">
                Modal title
              </h3>
              <button
                type="button"
                className="close icon"
                data-dismiss="modal"
                aria-label="Close"
              >
                close
              </button>
            </div>
            <div className="modal-body">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
              enim ad minim veniam, quis nostrud exercitation ullamco laboris
              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
              reprehenderit in voluptate velit esse cillum dolore eu fugiat
              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
              sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>
            <div className="modal-footer">
              <button
                type="button"
                className="btn btn-lg btn-link"
                data-dismiss="modal"
              >
                Cancel
              </button>
              <button
                type="button"
                className="btn btn-lg btn-primary"
                data-dismiss="modal"
              >
                Confirm
              </button>
            </div>
          </div>
        </div>
      </div>

{/* modal end */}

这是我用来显示模式的按钮：

 <button
        type="button"
        className="btn btn-lg btn-primary"
        data-bs-toggle="modal"
        data-bs-target="#small_modal"
        
      >
        Small modal
      </button>

我不知道为什么它不起作用，我需要写别的东西吗？我在 data-toggle 和 data-target 上添加了 bs，因为我在网上看到它是必需的，但它仍然没有用

Answer 1

您可以使用以下方法来实现此目的。在按钮上添加自定义 onClick 事件。

 <button
      type="button"
      className="btn btn-lg btn-link"
      data-dismiss="modal"
      onClick={() => {
              document.getElementById('small_modal').style.display = 'none';
              document.getElementById('small_modal').style.opacity = 0;
       }}>
           Cancel
     </button>

完整代码：

import "./App.css";

export default function App() {


  return (
    <div className="App">

{/* modal start */}
       <div
        id="small_modal"
        className="modal fade"
        role="dialog"
        aria-labelledby="mySmallModalLabel"
        aria-hidden="true"
      >
        <div className="modal-dialog modal-sm">
          <div className="modal-content shadow-max">
            <div className="modal-header">
              <h3 className="modal-title" id="exampleModalLabel1">
                Modal title
              </h3>
              <button
                type="button"
                className="close icon"
                data-dismiss="modal"
                aria-label="Close"
                onClick={() => {
                  document.getElementById('small_modal').style.display = 'none';
                  document.getElementById('small_modal').style.opacity = 0;
      
              }}
              >
                close
              </button>
            </div>
            <div className="modal-body">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
              enim ad minim veniam, quis nostrud exercitation ullamco laboris
              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
              reprehenderit in voluptate velit esse cillum dolore eu fugiat
              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
              sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>
            <div className="modal-footer">
              <button
                type="button"
                className="btn btn-lg btn-link"
                data-dismiss="modal"
                onClick={() => {
                  document.getElementById('small_modal').style.display = 'none';
                  document.getElementById('small_modal').style.opacity = 0;
      
              }}
              >
                Cancel
              </button>
              <button
                type="button"
                className="btn btn-lg btn-primary"
                data-dismiss="modal"
              >
                Confirm
              </button>
            </div>
          </div>
        </div>
      </div>

{/* modal end */}
     <button
        type="button"
        className="btn btn-lg btn-primary"
        data-bs-toggle="modal"
        data-bs-target="#small_modal"
        onClick={() => {
            document.getElementById('small_modal').style.display = 'block';
            document.getElementById('small_modal').style.opacity = 1;

        }}
          
      >
        Small modal
      </button>
    </div>
  );
}

虽然它会解决问题，但我建议为此使用 react-bootstrap 库。使用 React Bootstrap 你将能够以更简单的方式做同样的事情。

在此处查看更多信息和示例 - react bootstrap doc link

模态不适用于我的 React 项目（使用 bootstrap）

modal not working on my react project ( working with bootstrap)

reactjs

bootstrap-4