我正在學習反應，我的螢屏上有一個彈出視窗并添加了邏輯使其消失，但是它不起作用，我不知道為什么。任何人都可以幫忙嗎？謝謝
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;
這個節目在開始時使模態錯誤，但是如果我啟動網站，模態就會立即出現。提前致謝
uj5u.com熱心網友回復：
我已經修改了上面的代碼片段并進行了一些更改。
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;
uj5u.com熱心網友回復：
您應該將 modalIsOpen 初始化為 false，然后如果要關閉模式，您應該將其設定為 false 而不是 true。
function deleteHandler(){
setModalIsOpen(false);
}
uj5u.com熱心網友回復：
更改setModalIsOpen(true);為setModalIsOpen(false);開啟deleteHandler功能
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/411660.html
標籤：