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

Question

我正在使用Bootstrap模态和Reactjs。现在，我想控制如何在没有Jquery代码的情况下打开和关闭Bootstrap Modal。所以我的想法是使用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>

Answer 1

您不需要使用jquery，就可以使用用户响应引导模式，也可以参考下面的链接，也可以检查示例，其中还可以管理状态。

https://react-bootstrap.github.io/components/modal/