У меня есть файл 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;
ОБНОВЛЕНИЕ:
Перед отправкой
После отправки
Я что-то упустил?
Благодарю, что кто-то может помочь мне в этом вопросе.
Большое спасибо.
Я сделал новую правку. Посмотреть сейчас
@АюшГупта. Спасибо ! работать как шарм сейчас. К вашему сведению, я должен включить в список только "show" без "d-block". потому что, если я включу «d-block» в remove.class, он удалит мой верхний интерфейс заголовка навигации. Бв спасибо большое. Будьте здоровы .
Рад помочь :)