[英]How do I close my Modal using the react-modal component?
hi friends i'm having a problem if someone can help me i'll be very grateful, i can't find out why my modal doesn't close using shouldCloseOnOverlayClick = {true} and even without using it it doesn't close either I'll put the code: components/_App/ModalLogin.js嗨朋友们,如果有人可以帮助我,我会遇到问题,我将非常感激,我不知道为什么我的模态不会使用 shouldCloseOnOverlayClick = {true} 关闭,即使不使用它也不会关闭我会放代码:components/_App/ModalLogin.js
import React from 'react';
import ReactDOM from 'react-dom';
import Modal from 'react-modal';
import catchErrors from '../../utils/catchErrors';
const INITIAL_USER = {
email: '',
password: ''
}
const ModalLogin = ({isOpen, close }) => {
const [user, setUser] = React.useState(INITIAL_USER);
const [disabled, setDisabled] = React.useState(true);
const [loading, setLoading] = React.useState(false);
const [error, setError] = React.useState('');
React.useEffect((modal) => {
const isUser = Object.values(user).every(el => Boolean(el));
isUser ? setDisabled(false) : setDisabled(true)
}, [user]);
const handleChange = (e) => {
const { name, value } = e.target;
setUser(prevState => ({ ...prevState, [name]: value }));
}
const handleSubmit = async e => {
e.preventDefault();
try {
setLoading(true);
setError('');
const url = `${baseUrl}/api/login`;
const payload = { ...user };
const response = await axios.post(url, payload);
handleLogin(response.data);
} catch (error) {
catchErrors(error, setError);
} finally {
setLoading(false);
}
}
const customStyles = {
content: {
top: '50%',
left: '50%',
right: 'auto',
bottom: 'auto',
marginRight: '-50%',
transform: 'translate(-50%, -50%)'
}
};
console.log(close)
return (
<Modal
isOpen={isOpen}
style={customStyles}
onRequestClose={close}
shouldCloseOnOverlayClick={true}
>
<div className="">
<div className="theme_login_box radius">
<header>
<h1>Fazer Login:</h1>
<p>Informe seu nome e e-mail para fazer login e acessar seus pedidos.</p>
</header>
<form method="POST" onSubmit={handleSubmit}>
<input className="radius" type="email" name="email" value={user.email} onChange={handleChange} placeholder="E-mail:" />
<input className="radius" type="password" name="password" value={user.password} onChange={handleChange} placeholder="Senha:" />
<button className="btn transition radius icon-success" type="submit" href="/" title="Minha conta" >Fazer Login</button>
</form>
<a href="#" title="Recuperar senha" className="theme_login_box_recover transition icon-alert">Esqueci minha senha</a>
</div>
</div>
</Modal>
)
};
export default ModalLogin;
my file where I invoke the modal: components/_App/StaticHeader.js我在其中调用模式的文件: components/_App/StaticHeader.js
import React from 'react';
import Link from "next/link";
import Router, { useRouter } from 'next/router';
import NProgress from 'nprogress';
import { handleLogout } from '../../utils/auth';
import ModalLogin from './ModalLogin';
import ReactDOM from 'react-dom';
import Modal from 'react-modal';
Router.onRouteChangeStart = () => NProgress.start();
Router.onRouteChangeComplete = () => NProgress.done();
Router.onRouteChangeError = () => NProgress.done();
const StaticHeader = ({ user }) => {
const router = useRouter();
const [menuActive, setMenuActive] = React.useState(false);
const [search, setSearch] = React.useState({ search: '' });
//console.log(user)
const isRoot = user && user.role == 'root';
const isAdmin = user && user.role == 'admin';
const isRootOrAdmin = isRoot || isAdmin;
const [modalIsOpen, setIsOpen] = React.useState(false);
function openModal() {
setIsOpen(true);
}
function closeModal() {
setIsOpen(false);
}
const isActive = (route) => {
return route == router.pathname;
}
const handleOnChange = (e) => {
const { name, value } = e.target;
setSearch(prevState => ({ ...prevState, [name]: value }))
}
const handleSearch = (e) => {
Router.push({
pathname: '/products',
query: { term: search.search }
})
}
const menuToggle = () => {
setMenuActive(!menuActive)
}
return (
<header className="main_header">
<div className="container">
<div className="main_header_nav">
<div className="main_header_nav_logo">
<a href="" title="WdpShoes | Home">
<img alt="logo" title="logo menu" src="/css/themes/logo/wdpshoes_logo_white.png" />
</a>
</div>
<div className="main_header_nav_search">
<form action="" method="post" className="radius">
<input type="text" name="s" placeholder="Pesquisar na loja:" />
<button className="icon-search icon-notext transition"></button>
</form>
</div>
<div className="main_header_nav_menu">
<a className="icon-cart icon-notext transition main_header_nav_menu_cart" href="/cart"><span>3</span></a>
<div className="main_header_nav_menu_user">
<a href="#" title="#" className="icon-user main_header_nav_menu_user_a radius transition" onClick={openModal} >
{modalIsOpen && <ModalLogin isOpen={openModal} close={closeModal}/> }
Login</a>
<nav className="radius">
<a href="#">Meus Pedidos</a>
<a href="#">Meus Pedeidos</a>
<a href="#">Meus endereços</a>
<a href="#">Sair</a>
</nav>
</div>
</div>
</div>
<ul className="main_header_departments">
<li className="main_header_departments_li">
Departamento
<ul className="main_header_departments_li_ul">
<li className="main_header_departments_li_ul_li"><a href="">Categoria</a></li>
<li className="main_header_departments_li_ul_li"><a href="">Categoria</a></li>
<li className="main_header_departments_li_ul_li"><a href="">Categoria</a></li>
<li className="main_header_departments_li_ul_li"><a href="">Categoria</a></li>
</ul>
</li>
<li className="main_header_departments_li">
Departamento
<ul className="main_header_departments_li_ul">
<li className="main_header_departments_li_ul_li"><a href="">Categoria</a></li>
<li className="main_header_departments_li_ul_li"><a href="">Categoria</a></li>
<li className="main_header_departments_li_ul_li"><a href="">Categoria</a></li>
<li className="main_header_departments_li_ul_li"><a href="">Categoria</a></li>
</ul>
</li>
<li className="main_header_departments_li">
Departamento
<ul className="main_header_departments_li_ul">
<li className="main_header_deprtaments_li_ul_li"><a href="">Categoria</a></li>
<li className="main_header_departments_li_ul_li"><a href="">Categoria</a></li>
<li className="main_header_departments_li_ul_li"><a href="">Categoria</a></li>
<li className="main_header_departments_li_ul_li"><a href="">Categoria</a></li>
</ul>
</li>
<li className="main_header_departments_li">
Departamento
<ul className="main_header_departments_li_ul">
<li className="main_header_departments_li_ul_li"><a href="">Categoria</a></li>
<li className="main_header_departments_li_ul_li"><a href="">Categoria</a></li>
<li className="main_header_departments_li_ul_li"><a href="">Categoria</a></li>
<li className="main_header_departments_li_ul_li"><a href="">Categoria</a></li>
</ul>
</li>
</ul>
</div>
</header>
);
}
export default StaticHeader;
What could I be changing to make my modal work as expected if someone can help me thanks如果有人可以帮助我,我可以改变什么以使我的模态按预期工作谢谢
The issue is that you have encapsulated your modal inside the <a />
tag and in there you have an onClick
which calls openModal
.问题是您已将模态封装在
<a />
标记内,并且在其中有一个调用onClick
的openModal
。 Once you click on "close" inside your modal the event
propagates and triggers the click on <a />
tag.一旦您在模态框内单击“关闭”,
event
就会传播并触发对<a />
标记的单击。
To fix the issue just pull put the <Modal />
outside of your <a />
tag.要解决此问题,只需将
<Modal />
放在<a />
标记之外。
<a href="#" title="#" className="icon-user main_header_nav_menu_user_a radius transition" onClick={openModal} >Login</a>
{modalIsOpen && <ModalLogin isOpen={modalIsOpen} close={closeModal}/> }
In this line:在这一行:
{modalIsOpen && <ModalLogin isOpen={openModal} close={closeModal}/> }
The isOpen property should receive a boolean value but instead is receiving a function (openModal). isOpen 属性应该接收 boolean 值,而是接收 function (openModal)。 The correct value is
isOpen={modalIsOpen}
正确的值为
isOpen={modalIsOpen}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.