如何在React中用Bootstrap CDN实现表单提交后关闭Modal

问题背景 #

已通过CDN在index.html中引入Bootstrap V5，并在React组件的return()中添加了id为modalEditarIntegrante的Bootstrap Modal，希望在表单提交触发的editarIntegrante函数执行完成后关闭该Modal，但当前代码中的modal.hide()无法实现预期效果。

现有Modal代码 #

<div className="modal fade" id="modalEditarIntegrante" tabIndex="-1" aria-labelledby="modalEditarIntegrante" aria-hidden="true">
    <div className="modal-dialog">
        <div className="modal-content">
            <div className="modal-header">
                <h5 className="modal-title">Editar Integrante</h5>
                <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div className="modal-body">
                <form onSubmit={editarIntegrante}>
                    <div className="row mb-3 justify-content-between">
                        <div className="col-md-5">
                            <label htmlFor="nombreIntegranteEditar">Nombre</label>
                            <input type="text" id="nombreEditarIntegrante" className="form-control" 
                            value={nombreIntegranteEditar} onChange={(e)=>setNombreIntegranteEditar(e.target.value)}/>
                        </div>
                        <div className="col-md-6">
                            <label htmlFor="apellidoIntegranteEditar">Apellido</label>
                            <input type="text" id="apellidoEditarIntegrante" className="form-control" 
                            value={apellidoIntegranteEditar} onChange={(e)=>setApellidoIntegranteEditar(e.target.value)}/>
                        </div>
                    </div>
                    <div className="row mb-3 justify-content-between">
                        <div className="col-md-7">
                            <label htmlFor="nickIntegranteEditar">Nick</label>
                            <input type="text" id="nickEditarIntegrante" className="form-control"
                             value={nickIntegranteEditar} onChange={(e)=>setNickIntegranteEditar(e.target.value)}/>
                        </div>
                        <div className="col-md-4">
                            <label htmlFor="edadIntegranteEditar">Edad</label>
                            <input type="number" id="edadEditarIntegrante" className="form-control"
                             value={edadIntegranteEditar} onChange={(e)=>setEdadIntegranteEditar(e.target.value)}/>
                        </div>
                    </div>
                    <label htmlFor="juegoFavIntegranteEditar">Juego Fav</label>
                    <input type="text" id="juegoFavIntegranteEditar" className="form-control" 
                    value={juegoFavIntegranteEditar} onChange={(e)=>setJuegoFavIntegranteEditar(e.target.value)}/>
                    
                    <div className="modal-footer">
                        <button type="button" className="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" className="btn btn-primary">Save changes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

现有editarIntegrante函数代码 #

const editarIntegrante = async (e)=>{
    e.preventDefault();
    await fetch(`${URI}editarIntegrante`,{
        method:'POST',
        headers:{
            'content-type':'application/json'
        },
        body: JSON.stringify({
            'idIntegranteEditar': idIntegranteEditar,
            'nombreIntegrante': nombreIntegranteEditar,
            'apellidoIntegrante':apellidoIntegranteEditar,
            'nickIntegrante':nickIntegranteEditar,
            'desIntegrante':desIntegranteEditar,
            'edadIntegrante': edadIntegranteEditar,
            'juegoFavIntegrante': juegoFavIntegranteEditar,
            'imgIntegrante':imgIntegranteEditar
        })
    }).then(res=>res.json()).then(data=>{
        obtenerIntegrantes();
        let modal = document.getElementById('modalEditarIntegrante') 
        modal.hide();
        
    })
}

解决方案 #

核心原因 #

Bootstrap 5的Modal不能直接通过DOM元素调用hide()方法，必须通过Bootstrap提供的Modal类创建实例后，调用实例的方法来控制显示/隐藏。

方法1：修复现有函数（直接DOM获取） #

修改editarIntegrante函数，使用Bootstrap的Modal实例来关闭弹窗：

const editarIntegrante = async (e)=>{
    e.preventDefault();
    try {
        const res = await fetch(`${URI}editarIntegrante`,{
            method:'POST',
            headers:{
                'content-type':'application/json'
            },
            body: JSON.stringify({
                'idIntegranteEditar': idIntegranteEditar,
                'nombreIntegrante': nombreIntegranteEditar,
                'apellidoIntegrante':apellidoIntegranteEditar,
                'nickIntegrante':nickIntegranteEditar,
                'desIntegrante':desIntegranteEditar,
                'edadIntegrante': edadIntegranteEditar,
                'juegoFavIntegrante': juegoFavIntegranteEditar,
                'imgIntegrante':imgIntegranteEditar
            })
        });
        const data = await res.json();
        obtenerIntegrantes();
        
        // 正确关闭Modal的代码
        const modalElement = document.getElementById('modalEditarIntegrante');
        // 先检查是否已有实例，避免重复创建
        const modalInstance = window.bootstrap.Modal.getInstance(modalElement) || new window.bootstrap.Modal(modalElement);
        modalInstance.hide();
    } catch (error) {
        console.error('编辑失败:', error);
    }
}

方法2：React式优化（使用useRef） #

为了更符合React的编程习惯，避免直接操作DOM，可以使用useRef来获取Modal元素：

1. 在组件内引入并创建ref：

import { useRef } from 'react';

const YourComponent = () => {
    const modalRef = useRef(null);
    // ...其他状态和函数

2. 在Modal元素上绑定ref：

<div className="modal fade" ref={modalRef} id="modalEditarIntegrante" tabIndex="-1" aria-labelledby="modalEditarIntegrante" aria-hidden="true">
    <!-- Modal内容不变 -->
</div>

3. 修改editarIntegrante函数中的关闭逻辑：

// ...其他代码
obtenerIntegrantes();

const modalInstance = window.bootstrap.Modal.getInstance(modalRef.current) || new window.bootstrap.Modal(modalRef.current);
modalInstance.hide();
// ...其他代码

内容的提问来源于stack exchange，提问作者Shakur23