我正在使用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>
您可以使用数据属性。
可以通过数据属性或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元素并对其进行访问。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句