单击按钮后，Bootstrap5 模式未显示在 react.js 中

如何解决单击按钮后，Bootstrap5 模式未显示在 react.js 中

我正在使用 bootstrap5 做出反应。我在 react 中成功安装了 bootstrap5。现在我必须在我的页面上显示模态，所以我在我的页面上添加了一个按钮和模态代码。

下面是我用于模态的代码。现在我点击按钮然后没有任何工作。我没有得到我的模态。

你能帮我解决这个问题吗？

import React from "react";

function addEmployee(){
    return(
<div className="addEmployee">
<button type="button" className="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">Add Employee</button>

<div className="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabIndex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div className="modal-dialog">
    <div className="modal-content">
      <div className="modal-header">
        <h5 className="modal-title" id="staticBackdropLabel">Modal title</h5>
        <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div className="modal-body">
        ...
      </div>
      <div className="modal-footer">
        <button type="button" className="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" className="btn btn-primary">Understood</button>
      </div>
    </div>
  </div>
</div>


</div>

    )
}
export default addEmployee;

解决方法

Bootstrap 5 不再依赖于 jQuery，因此您不需要像 react-bootstrap 这样的第三方库即可在 React 中使用 Bootstrap。例如，您可以在标记中使用 data-bs- 属性，或为 Bootstrap 模态创建一个功能组件，并使用显示/隐藏模态的方法...

function ModalExample() {
    const modalRef = useRef()
    
    const showModal = () => {
        const modalEle = modalRef.current
        const bsModal = new Modal(modalEle,{
            backdrop: 'static',keyboard: false
        })
        bsModal.show()
    }
    
    const hideModal = () => {
        const modalEle = modalRef.current
        const bsModal= bootstrap.Modal.getInstance(modalEle)
        bsModal.hide()
    }
    
    return(
        <div className="addEmployee">
            <button type="button" className="btn btn-primary" onClick={showModal}>Add Employee</button>
            <div className="modal fade" ref={modalRef} tabIndex="-1" >
             <div className="modal-dialog">
                <div className="modal-content">
                  <div className="modal-header">
                    <h5 className="modal-title" id="staticBackdropLabel">Modal title</h5>
                    <button type="button" className="btn-close" onClick={hideModal} aria-label="Close"></button>
                  </div>
                  <div className="modal-body">
                    ...
                  </div>
                  <div className="modal-footer">
                    <button type="button" className="btn btn-secondary" onClick={hideModal}>Close</button>
                    <button type="button" className="btn btn-primary">Understood</button>
                  </div>
                </div>
              </div>
            </div>
        </div>
    )
}

Demo of both methods

,

我建议您使用 react-bootstrap 它更容易，并且 javascript 已经为您完成

React-Bootstrap 替换了 Bootstrap JavaScript

每个组件都是作为一个 React 组件从头开始构建的，没有像 jQuery 这样不需要的依赖项。

要开始，只需安装软件包 npm install react-bootstrap bootstrap

看这个例子

import { Modal,Button } from "react-bootstrap";
function Example() {
  const [show,setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  return (
    <>
      <Button variant="primary" onClick={handleShow}>
        Launch demo modal
      </Button>

      <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>Modal heading</Modal.Title>
        </Modal.Header>
        <Modal.Body>Woohoo,you're reading this text in a modal!</Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            Close
          </Button>
          <Button variant="primary" onClick={handleClose}>
            Save Changes
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

render(<Example />);

Gaurav Singhal 的博客 @ PluralSight

必须使用使用内部状态设置的受控组件 值并更改组件的行为。图书馆喜欢 jQuery 直接操作 DOM，而 React 组件使用 虚拟 DOM 用于修改浏览器上的实际 DOM。使用 jQuery 改变你的组件的行为是可能的。还是会导致 出乎意料的结果并使其难以调试。反应引导 用纯 React 实现各个组件，不用担心 关于 Bootstrap 对 jQuery 的依赖

查看他们的 (react-bootstrap) 文档页面，这里是您可以关注/转到 react-bootstrap

的链接