时间戳

首页 > 解决方案 > 如何使用 useState Reactjs 来控制打开或关闭 Modal Bootstrap？（不使用 ReactBootstrap 库）

reactjs - 如何使用 useState Reactjs 来控制打开或关闭 Modal Bootstrap？（不使用 ReactBootstrap 库）

问题描述

我正在使用 Bootstrap modal 和 Reactjs。现在我想控制如何在没有 Jquery 代码的情况下打开和关闭引导模式。所以我的想法是使用 useState 来控制模态的状态，如果为 true，它将添加类“show”以打开模态，而 false 它添加类“hide”。但它不起作用，我该如何解决这个问题？或者无论如何都可以在没有 Jquery 代码的情况下控制模态？谢谢

const [openModal, setopenModal] = useState(false);
const openmodal = () => {
   setopenModal(!openModal);
};
return (
 <div>
  <button onClick={openmodal}>open</button>
   <div id="mod" className={`modal ${openModal ? 'show' : 'hide'}`}>
    <div className="modal-dialog modal-xl">
      <div className="modal-content">
        hello
      </div>
    </div>
  </div>
</div>

标签： reactjsbootstrap-modal

解决方案

您可以使用数据属性。

选项可以通过数据属性或 JavaScript 传递。对于数据属性，将选项名称附加到 data-，如 data-show=""。

data-show 属性指定初始化时是否显示模态框。

<div id="mod" data-show={openModal ? 'true' : 'false'}> ... </div>

请参阅：https ://www.w3schools.com/Bootstrap/bootstrap_ref_js_modal.asp

或者，您可以使用 useRef 获取模态 DOM 元素并访问它。

推荐阅读