Как закрыть модальное окно начальной загрузки после отправки формы в React JS?

avatar
Rzj Hayabusa
9 августа 2021 в 04:33
1220
2
0

У меня есть файл User.js для отправки формы, и я пытаюсь отправить форму с помощью модального окна начальной загрузки. У меня нет проблем с отправкой данных в базу данных.

Но у меня возникла проблема с закрытием модального окна начальной загрузки после запуска onSubmit={createUser}.

Я добавляю onClick={handleCloseModal} и устанавливаю его в false после того, как нажимаю кнопку отправки.

Но модальное окно начальной загрузки не близко. Я понятия не имею, что делаю.

Вот мой код в 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;

ОБНОВЛЕНИЕ:

Перед отправкой

enter image description here

После отправки

enter image description here

Я что-то упустил?

Благодарю, что кто-то может помочь мне в этом вопросе.

Большое спасибо.

Источник
Ayush Gupta
9 августа 2021 в 06:13
2

Я сделал новую правку. Посмотреть сейчас

Rzj Hayabusa
9 августа 2021 в 07:12
1

@АюшГупта. Спасибо ! работать как шарм сейчас. К вашему сведению, я должен включить в список только "show" без "d-block". потому что, если я включу «d-block» в remove.class, он удалит мой верхний интерфейс заголовка навигации. Бв спасибо большое. Будьте здоровы .

Ayush Gupta
9 августа 2021 в 07:13
1

Рад помочь :)

Ответы (2)

avatar
Ayush Gupta
9 августа 2021 в 04:41
3

Попробуйте это:

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"));
}
Rzj Hayabusa
9 августа 2021 в 04:52
0

Привет. я попробовал ваше предложение, но оно не сработало, так как у меня нет "шоу" в моем html

Ayush Gupta
9 августа 2021 в 04:54
3

Модальное окно @RzjHayabusa Bootstrap уже добавляет к модальным окнам класс show.

Ayush Gupta
9 августа 2021 в 04:56
3

@RzjHayabusa, какую версию начальной загрузки вы используете?

Rzj Hayabusa
9 августа 2021 в 04:56
0

Я не уверен, что это не работает на моей стороне. обычно я использую jQuery для отображения или скрытия модальных окон, как эта функция openModal(getId) { $('#modal_name').modal({ show: true }); } . но в reactjs я не уверен, как это реализовать

Rzj Hayabusa
9 августа 2021 в 05:08
0

Я использую бутстрап 4

Ayush Gupta
9 августа 2021 в 05:18
3

@RzjHayabusa Я внес изменения. Посмотреть сейчас

Rzj Hayabusa
9 августа 2021 в 05:33
0

Всплывающее окно скрывается после того, как я нажимаю кнопку «Отправить», но не закрывается полностью, но поверх интерфейса отображается серый макет. Я не уверен, почему модальное окно не полностью закрыто.

Ayush Gupta
9 августа 2021 в 05:34
3

@RzjHayabusa Я сделал правку, смотри сейчас

Rzj Hayabusa
9 августа 2021 в 05:42
0

Я вижу, что серый фон становится более светлым по сравнению с модальным серым фоном по умолчанию. Но все же чего-то не хватает. Серый фон остался

Ayush Gupta
9 августа 2021 в 05:49
2

@RzjHayabusa Можете ли вы поделиться снимком экрана до и после закрытия модального окна?

Rzj Hayabusa
9 августа 2021 в 05:58
0

Я обновил свой вопрос и свой код выше со скриншотом.

avatar
Viet
9 августа 2021 в 04:42
1

Вы можете использовать data-dismiss="modal", чтобы закрыть модальное окно как кнопку закрытия

Если вы хотите использовать состояние closeModal, вы можете добавить следующее:

{!closeModal && <div id="myModal">{/* ... */}</div>}
Rzj Hayabusa
9 августа 2021 в 04:53
0

Как я могу реализовать это в своем коде? простите. Я все еще новичок в React JS

Viet
9 августа 2021 в 04:57
1

Я обновил свой ответ. Вы копируете свой модальный HTML внутри него

Rzj Hayabusa
9 августа 2021 в 05:07
0

уже добавить в мой код. Модальное окно успешно закрывается, когда я отправляю форму, но все еще имеет серый макет поверх интерфейса. модальное окно не полностью закрыто