如何在 React JS 中提交表单后关闭 bootstrap 模式？

Question

我有 User.js 文件来提交表单，我正在尝试使用 bootstrap 模式提交表单。我提交数据到数据库没问题。

但是我在触发 onSubmit={createUser} 后关闭 bootstrap 模式时遇到问题。

我添加了onClick={handleCloseModal}，点击提交按钮后设置为false。

但是 bootstrap 模态没有关闭。我不知道我在做什么。

这是我在 User.js 中的代码。

import axios from 'axios';
import { data } from 'jquery';
import React, { useEffect, useState } from 'react';
import { Redirect, Link } from 'react-router-dom'; 

const Users = () => {

    const [users, setUsers]             = useState([]);   
    const [name, setName]               = useState('');       
    const [closeModal, setCloseModal]   = useState(false);

    function handleCloseModal(){
        document.getElementById("myModal").classList.remove("show", "d-block", "modal-open");  
        document.getElementsByClassName("modal-backdrop")[0].classList.remove("modal-backdrop");
    }

    useEffect( () => {
        (
            async () => {
                const {data} = await axios.get('getUsers');
                setUsers(data);
            }
        )()
    }, []); 

    // Add
        const createUser = async (e) => {

            e.preventDefault();

            await axios.post('createUser', {
                name            : name 
            }).then(
                async () => {
                    const {data} = await axios.get('getUsers');
                    setUsers(data);
                }
            );  

            setCloseModal(true);
            
        }
    // Add

    return( 
            <>
                {/* Page Content */}
                    <div className="container-fluid">
                        <div className="row">
                            <div className="col-lg-12 col-md-12"> 
                                <div className="row">
                                    <div className="col-lg-12">
                                        <div className="card card-outline-info">
                                            <div className="card-header">
                                                <h4 className="m-b-0 text-white">Users</h4>
                                            </div>
                                            <div className="card-body">

                                                {/* Modal */} 
                                                {!closeModal &&
                                                    <div id="myModal" className="modal bs-example-modal-lg" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" style={{display: 'none', overflowY: 'auto'}}>
                                                        <div className="modal-dialog modal-lg">
                                                            <div className="modal-content">
                                                                <div className="modal-header">
                                                                    <h4 className="modal-title" id="myModalLabel">Fields <font color="red">*</font> asterisk required</h4>
                                                                    <button type="button" className="close" data-dismiss="modal" aria-hidden="true">×</button>
                                                                </div> 
                                                                <div className="modal-body"> 
                                                                    <form className="" id="" action="" onSubmit={createUser}> 
                                                                        
                                                                        <div className="col-md-12">
                                                                            <div className="form-group row">
                                                                                <label className="control-label text-right col-md-3"><font color="red">*</font> Name</label>
                                                                                <div className="col-md-9">   
                                                                                    <input type="text" id="name" className="form-control name" name='name' placeholder=""
                                                                                        onChange={e=>setName(e.target.value)}
                                                                                    />
                                                                                    <small className="form-control-feedback"></small> 
                                                                                </div>
                                                                            </div>
                                                                        </div> 

                                                                        <div className="modal-footer">
                                                                            <button type="button" className="btn btn-info waves-effect" data-dismiss="modal">Close</button>
                                                                            <button type="submit" className="btn btn-success waves-effect text-left" id="" onClick={handleCloseModal}>Create</button>
                                                                        </div>

                                                                    </form> 
                                                                </div>  
                                                            </div> 
                                                        </div> 
                                                    </div> 
                                                }
                                                {/* Modal */}

                                                {/* Content Layout Here */} 
                                                    <button type="button" data-toggle="modal" data-target="#myModal" className="btn btn-xs btn-success">Add User</button>
                                                    
                                                    <div className="table-responsive"> 
                                                        <table id="table-user">
                                                            <thead>
                                                                <tr>
                                                                    <th style={{verticalAlign: 'top'}}>No</th>   
                                                                    <th style={{verticalAlign: 'top'}}>Name</th>  
                                                                </tr> 
                                                            </thead> 
                                                            <tbody>  
                                                                {users.map((user) => {
                                                                    return(
                                                                        <tr key={user.id}> 
                                                                            <td>{user.name}</td> 
                                                                        </tr>
                                                                    )
                                                                })}
                                                            </tbody>     
                                                        </table> 
                                                    </div> 
                                                {/* Content Layout Here */}

                                            </div>
                                        </div>
                                    </div>
                                </div> 
                            </div>
                        </div>
                    </div> 
                {/* Page Content */}

            </>  
    );
}

export default Users;

更新：

提交之前

提交后

我是不是遗漏了什么？

感谢有人可以帮助我解决这个问题。

非常感谢。

Answer 1

试试这个：

function handleCloseModal(){
    document.getElementById("myModal").classList.remove("show");
}

对于 Bootstrap 4 试试这个：

function handleCloseModal(){            
    document.getElementById("myModal").classList.remove("show", "d-block");
}

编辑

要去除模态框关闭后的灰色背景，可以这样做：

function handleCloseModal(){            
    document.getElementById("myModal").classList.remove("show", "d-block");
    document.querySelectorAll(".modal-backdrop")
            .forEach(el => el.classList.remove("modal-backdrop"));
}

Answer 2

您可以使用data-dismiss="modal"关闭模式作为关闭按钮

如果你想使用状态closeModal，你可以这样添加：

{!closeModal && <div id="myModal">{/* ... */}</div>}

如何在 React JS 中提交表单后关闭 bootstrap 模式？

How to close bootstrap modal after submit form in React JS?

bootstrap-modal

reactjs