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

Question

I am using bootstrap5 to React. I successfully installed the bootstrap5 in React. Now I have to show the modal on my page so I added a button and modal code on my page.

Below is the code I am using for the modal. Now I click on the button then nothing is working. I am not getting my modal.

What is the issue here?

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

Bootstrap 5 no longer depends on jQuery so you don't need a 3rd party library library like react-bootstrap to use Bootstrap in React. For example you can use the data-bs- attributes in the markup, or create a functional component for the Bootstrap modal with methods to show/hide the modal...

function ModalExample() {
    const modalRef = useRef()
    
    const showModal = () => {
        const modalEle = modalRef.current
        const bsModal = new bootstrap.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

Answer 2

I would suggest you'd use react-bootstrap its a lot easier and the javascript has been done for you

React-Bootstrap replaces the Bootstrap JavaScript

Each component has been built from scratch as a React component, without unneeded dependencies like jQuery.

To get started just install the package npm install react-bootstrap bootstrap

look at this example

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's blog @ 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

to check out their (react-bootstrap) documentation page,here is the link you can follow/go to react-bootstrap