php 如何在React中不使用jQuery控制Bootstrap 4模态状态？

efzxgjgh 于 2022-12-17 发布在 PHP

关注(0)|答案(1)|浏览(107)

我开发了一个PHP网页应用程序。UI是用Twig模板构建的。
我已经开始用ReactJS组件添加一些新的表单（并替换一些现有的表单），我喜欢这种方法，对结果也很满意。
应用程序使用Bootstrap 4。一些ReactJS组件 Package /使用Bootstrap 4模式。
我在React组件中使用JQuery显示/隐藏模态，我无法找到任何其他的方法。

$("#myModal").modal('show');

我知道您应该避免在React中使用JQuery，但是有没有其他方法可以在不使用JQuery的情况下打开/关闭模态呢？每个组件使用几行JQuery似乎是最简单的方法。
我尝试通过设置状态然后应用样式来打开和关闭模态，但是它不起作用，因为我仍然需要在React组件之外的“父”主体上设置样式。

php

来源：https://stackoverflow.com/questions/74829198/how-can-i-control-bootstrap-4-modal-state-in-react-without-jquery

1条答案

按热度按时间

ia2d9nvy1#

在React组件中最好避免使用jQuery，对于引导模态，可以将其转换为ReactBootStrap组件。
你也可以用这个来达到同样的效果。
此外，您可以在模态上使用ref={refName}，访问模态的DOM元素，并使用Bootstrap提供的.modal（）函数来显示/隐藏模态。
如下所示：

const modalRef = useRef(null);

const handleShowModal = () => {
  $(modalRef.current).modal('show');
};
const handleHideModal = () => {
  $(modalRef.current).modal('hide');
};

模态Div应为<div ref={modalRef}，如下所示。

赞(0）回复(0）举报 2022-12-17

我来回答

php 如何在React中不使用jQuery控制Bootstrap 4模态状态？

1条答案

相关问题

热门标签

最新问答