如何用react关闭bootstrap 5模态

Question

我在我的项目中使用 Bootstrap 5 和 React。我没有安装它，而是使用 cdn 链接来使用 dom 中的 bootstrap 元素。我正在使用引导模式来更新数据。更新后我想关闭模式。我尝试使用 useRef 钩子，但它不起作用并且给出错误。我尝试通过 id 的文档关闭它，但仍然不起作用。我的代码是

<div
          className="modal fade"
          id="QuestEditModal"
          tabIndex="-1"
          aria-hidden="true"
        >
          <div className="modal-dialog modal-lg modal-dialog-centered">
            <div className="modal-content">
              <div className="modal-header">
                <h5 className="modal-title">Edit Question</h5>
                <button
                  type="button"
                  className="btn-close"
                  data-bs-dismiss="modal"
                  aria-label="Close"
                ></button>
              </div>

              <div className="modal-body">
                <div className="d-flex flex-row bd-highlight mb-3">
                  <div className="p-2 w-80 bd-highlight">
                    
                    <div className="input-group mb-3">
                    <label htmlFor="Question" className="form-label">Question</label>
                        <textarea className="form-control" 
                        id="Question" rows="3" cols="160" name="question"
                        value={qcont}
                        onChange={(event) => handleQChange(event)}
                        ></textarea>
                    </div>
                    <div className="input-group mb-3">
                    <button
                    type="button"
                    className="btn btn-primary float-start"
                      onClick={(e) => handleSave(e)}>
                          Update
                    </button>
                    </div>
                  </div>
                  
                </div>
              
            </div>
          </div>
        </div>
      </div>

const handleSave = (event) => {
    fetch("http://localhost:57030/api/question", {
         method: "PUT",
         headers: {
           Accept: "application/json",
           "Content-Type": "application/json",
         },
         body: JSON.stringify({
           QuestId:qid,
           ExamUid:exuid,
           QuestUid:quid,
           Content:qcont
         }),
       })
         .then(res => res.json())
         .then(res => {
             console.log(res);
             refreshList();
           },
           (error) => {
             alert("Failed" + error);
           }
         ); 
  }

Answer 1

你必须做这样的事情。 为模型创建参考

  const modalRef = useRef(null);

    <div
        className="modal fade"
        id="QuestEditModal"
        ref={modalRef}
        tabIndex="-1"
        aria-hidden="true"
      >....</div>

现在，在 API 响应成功后，创建一个模型实例并关闭它。

const bootstrapModal = new bootstrap.Modal(modalRef.current);
bootstrapModal.hide();

检查我们在 doc

中所做的事情

根据文档，您可以直接使用 id 而无需引用

const model= new bootstrap.Modal(document.getElementById('QuestEditModal'));
model.hide();

Answer 2

modal的关闭按钮有这些参数

<button
                  type="button"
                  className="btn-close"
                  data-bs-dismiss="modal"
                  aria-label="Close"
                ></button>

我的保存按钮是

<button
                    type="button"
                    className="btn btn-primary float-start" onClick={(e) => handleSave(e)}>
                          Update
                    </button>

我在保存按钮中添加了模态关闭按钮的两个参数，现在它不仅保存数据，还关闭模态弹出窗口。

data-bs-dismiss="modal"
                    aria-label="Close"

像这样

<button
                    type="button"
                    className="btn btn-primary float-start" data-bs-dismiss="modal"
                    aria-label="Close" onClick={(e) => handleSave(e)}>
                          Update
                    </button>