提问人：Mat 提问时间：1/16/2022 最后编辑：Sangeet AgarwalMat 更新时间：1/16/2022 访问量：254
模态不会消失
Modal not disappearing
问：
我正在学习反应，我在屏幕上有一个弹出窗口并添加了逻辑使其消失，但是它不起作用，我不知道为什么。谁能帮忙？
import { useState } from 'react';
import Modal from './Modal';
import Backdrop from './Backdrop';
function Todo(props) {
const [modalIsOpen, setModalIsOpen] = useState();
function deleteHandler(){
{setModalIsOpen(true);}
}
return (
<div className="card">
<h2>{props.text}</h2>
<div className="actions">
<button className="btn" onClick={deleteHandler}>Delete</button>
</div>
{modalIsOpen ? <Modal /> : null}
{modalIsOpen ? <Backdrop /> : null}
</div>
);
}
export default Todo;
这个节目在一开始就使模态是错误的，但是，如果我启动网站，模态就会立即出现。
答：
0赞
gianpiero papappicco
1/16/2022
#1
您应该将 modalIsOpen 初始化为 false，然后如果要关闭模态，则应设置为 false，而不是 true。
function deleteHandler(){
setModalIsOpen(false);
}
评论
0赞
Mat
1/16/2022
我有同样的东西
0赞
Amin Azimi
1/16/2022
#2
更改为 ON 功能setModalIsOpen(true);setModalIsOpen(false);deleteHandler
1赞
Dev-2019
1/16/2022
#3
我修改了上面的片段，并进行了一些更改。
import { useState } from 'react';
import Modal from './Modal';
import Backdrop from './Backdrop';
function Todo(props) {
const {text} = {...props}
const [modalIsOpen, setModalIsOpen] = useState(false);
const deleteHandler =()=> {
setModalIsOpen(false)
}
return (
<div className="card">
<h2>{text}</h2>
<div className="actions">
<button className="btn" onClick={deleteHandler}>Delete</button>
</div>
{modalIsOpen && <Modal /> }
{modalIsOpen && <Backdrop />}
</div>
);
}
export default Todo;
评论
1赞
Dev-2019
1/16/2022
哦。你能尝试重新启动项目吗？我在这里找不到任何问题。
1赞
Dev-2019
1/16/2022
您能否在代码沙盒中提供您的代码，以便我查看它
2赞
Dev-2019
1/16/2022
remove 和 fromModelBackdropApp.js
1赞
gianpiero papappicco
1/16/2022
App.js 中有一个模态调用，请尝试将其删除
1赞
Dev-2019
1/16/2022
我看不到你的github有任何变化:)
上一个：复选框值未识别
评论
const [modalIsOpen, setModalIsOpen] = useState(false)