如何在React中创建确认删除弹出窗口

Question

我正在创建一个Todo应用程序，并试图创建一个确认删除弹出窗口，当用户想要删除Todo时，该弹出窗口将可见。

在我的todo.js组件中，我在删除按钮中创建了一个onClick回调handleDelete，该回调会将弹出窗口设置为true，使其可见，问题是在handleDelete中，我将Id作为参数传递，这样我就可以跟踪单击了哪个todo，并对其进行过滤，以显示更新todo状态的新数据，但我只想在用户点击弹出窗口中的确认按钮时更新数据。

应用程序组件：

function App() {
const [inputValue, setInputValue] = useState("");
const [todos, setToDos] = useState([]);
const [noToDo, setNoToDo] = useState(false);
const [popup, setPopup] = useState(false);
const handleOnSubmit = (e) => {
e.preventDefault();
setNoToDo(false);
const ide = nanoid();
const date = new Date().toISOString().slice(0, 10);
const newToDo = { task: inputValue, id: ide, date: date };
setToDos([...todos, newToDo]);
setInputValue("");
};
const handleDelete = (id) => {
setPopup(true);
let filteredData = todos.filter((todo) => todo.id !== id);
{
/*
filteredData is the new data, but I only want to update 
todos with filteredData when the user has clicked on the confirm
button in the modal component, which execute(handleDeleteTrue)*/
}
};
const handleDeleteTrue = () => {
setPopup(false);
setToDos(filteredData);
};
const handleEdit = (id, task) => {
setInputValue(task);
const EditedData = todos.filter((edited) => edited.id !== id);
setToDos(EditedData);
};
return (
<div className="App">
<div className="app_one">
<h1>To do app</h1>
<form action="" className="form" onSubmit={handleOnSubmit}>
<input
type="text"
placeholder="Go to the park..."
onChange={(e) => setInputValue(e.target.value)}
value={inputValue}
/>
<button type="submit">ADD TO DO</button>
</form>
</div>
{noToDo && <FirstLoad />}
{todos.map((todo) => {
return (
<div key={todo.id} className="result">
<Todo
{...todo}
handleDelete={handleDelete}
handleEdit={handleEdit}
/>
</div>
);
})}
{popup && <Popup handleDeleteTrue={handleDeleteTrue} />}
</div>
);
}
export default App;

Todo组件：

const Todo = ({ handleDelete, handleEdit, task, id, date }) => {
return (
<>
<div className="result_text">
<h3>{task}</h3>
<p className="result_textP">{date}</p>
</div>
<div>
<button onClick={() => handleEdit(id, task)} className="button green">
Edit
</button>
<button onClick={() => handleDelete(id)} className="button">
delete
</button>
</div>
</>
);
};
export default Todo;

模态组件：

function Popup({ handleDeleteTrue }) {
return (
<div className="modal">
<div className="modal_box">
<p>You sure you wanna delete?</p>
<button className="modal_buttonCancel">Cancel</button>
<button onClick={handleDeleteTrue} className="modal_buttoDelete">
Confirm
</button>
</div>
</div>
);
}
export default Popup;

我试图在App组件之外将filteredData声明为全局变量，因此当我执行handleDelete时，它会用过滤后的数据初始化该变量，只有当用户单击弹出窗口上的确认按钮时，它才会执行一个新函数handleDeleteTrue，将数据更新为filteredData。

它是有效的，但在组件之外声明变量不是一个好的做法，所以有更好的方法吗

Answer 1

当前代码中的问题是，您正在丢失应该删除的id，因此需要将其存储在ref或state中。

这是一个解决方案，它将id存储在状态中，并带有显示/隐藏确认框的布尔标志：

const [popup, setPopup] = useState({
show: false, // initial values set to false and null
id: null,
});

将删除处理程序修改为：

// This will show the Cofirmation Box
const handleDelete = (id) => {
setPopup({
show: true,
id,
});
};
// This will perform the deletion and hide the Confirmation Box
const handleDeleteTrue = () => {
if (popup.show && popup.id) {
let filteredData = todos.filter((todo) => todo.id !== popup.id);
setToDos(filteredData);
setPopup({
show: false,
id: null,
});
}
};
// This will just hide the Confirmation Box when user clicks "No"/"Cancel"
const handleDeleteFalse = () => {
setPopup({
show: false,
id: null,
});
};

并且，在JSX中，将处理程序传递给Popup:

{popup.show && (
<Popup
handleDeleteTrue={handleDeleteTrue}
handleDeleteFalse={handleDeleteFalse}
/>
)}