使用引导 CDN 关闭模式并做出反应答案

【问题标题】：Close modal using bootstrap CDNs and react使用引导 CDN 关闭模式并做出反应
【发布时间】：2022-09-23 06:31:28
【问题描述】：

我正在使用通过 CDN 链接链接到我的 index.html 的引导 V5，我想将引导模式添加到我的反应项目（在我的组件的 return() 内部），如下所示：

<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 w-\" 
                        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>

在提交事件之后，我希望能够使用 id= \'modalEditarIntegrante\' 关闭模式

所以在函数提交后\“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();
        
    })
}

而不是modal.hide()，请尝试modal.style.display = \'none\'。该项目仍然缺少部分，但很可能您将不得不使用挂钩来实现您的目标
有用！但是模态的背景仍然是灰色的，我该如何解决？
我不认为那在您共享的代码中，因此请尝试使用浏览器识别检查元素
我的意思是当你打开一个引导模型时，它会出现带有灰色背景的模态，只关注模态，我想知道如何在关闭模态后禁用灰色背景
您不使用React Bootstrap 是否有原因？它可能会为您省去很多麻烦。

标签： reactjs bootstrap-4 jsx

【解决方案1】：

关于 Bootstrap 5 documentation 您必须初始化模态才能控制它。

var ModaleditarIntegrante = new bootstrap.Modal('#modalEditarIntegrante');

之后你可以使用.hide()

ModaleditarIntegrante.hide();

【讨论】：

我得到了下一个错误：编译时出现问题：X 错误 [eslint] src\Componentes\integrante\CompShowIntegrante.js 行 63:45: 'bootstrap' is not defined no-undef 搜索关键字以了解有关每个错误的更多信息。
您如何将引导程序包含到您的项目中？
在公共文件夹内的 index.html 中（使用 CDN 引导链接）