单击按钮后，Bootstrap5 模态未显示在 React.js 中

Question

我正在使用 bootstrap5 来进行 React。我在 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;

Answer 1

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

React-Bootstrap replaces the 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

You must use controlled components that use the internal state to set the values and change the behavior of a component. Libraries like jQuery do direct DOM manipulation, whereas React components use Virtual DOM to modify the actual DOM on the browser. Using jQuery to change your component's behavior is possible. Still, it will lead to unexpected results and make it difficult to debug. React Bootstrap implements each component in pure React, so you don't have to worry about Bootstrap's dependency on jQuery

查看他们的 (react-bootstrap) 文档页面，这是 link 你可以 follow/go 到 react-bootstrap

Answer 2

Bootstrap 5 不再依赖于 jQuery 所以你不需要像 react-bootstrap 这样的第三方库来使用 Bootstrap 在 React 中。例如，您可以在标记中使用 data-bs- 属性，或为 Bootstrap 模态创建功能组件show/hide 模态的方法...

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

单击按钮后，Bootstrap5 模态未显示在 React.js 中

Bootstrap5 modal not displaying in React.js after clicking on the button

html

javascript

twitter-bootstrap

reactjs

bootstrap-5