如何保持最后的组件样式?

Question

我正在使用React Js构建一个待办事项应用程序。在任务组件中，我使用状态来为完成的任务应用特定的样式，它工作得很好。但是，在我点击任何删除按钮后，已完成任务的样式就被删除了。我怎样才能避免呢?

import Task from "../Task/Task";
import style from "./TasksList.module.css";
const TasksList = ({ tasks, deleteTaskHandler }) => {
return (
<div className={style.tasks}>
<div className="container">
{tasks.map((task, idx) => {
return (
<Task
task={task}
id={idx}
key={Math.random()}
deleteTaskHandler={deleteTaskHandler}
/>
);
})}
</div>
</div>
);
};
export default TasksList;

import { useState } from "react";
import style from "./Task.module.css";
const Task = ({ task, id, deleteTaskHandler }) => {
const [isComplete, setIsComplete] = useState(false);
const markComplete = () => {
setIsComplete(!isComplete);
};
return (
<div
className={
isComplete ? `${style.task}  ${style.completed}` : `${style.task}`
}
onClick={markComplete}
>
<label>{task.desc}</label>
<button onClick={() => deleteTaskHandler(id)}> Delete </button>
</div>
);
};
export default Task;

Answer 1

如何在更高的组件中维护任务的完整状态?

当前未初始化Task的完整状态。如果task对象包含isComplete属性，那么您可以使用如下所示

const [isComplete, setIsComplete] = useState(task.isComplete);

但是，还需要更新已完成任务的值。因此，我建议将所有较低的组件都设置为无状态。并维持在较高分量(即TaskList

)的状态。

import style from "./Task.module.css";
const Task = ({ task, id, deleteTaskHandler, setTaskCompleteHandler }) => {
const markComplete = () => {
setTaskCompleteHandler(!task.isComplete);
};
return (
<div
className={
task.isComplete ? `${style.task}  ${style.completed}` : `${style.task}`
}
onClick={markComplete}
>
<label>{task.desc}</label>
<button onClick={() => deleteTaskHandler(id)}> Delete </button>
</div>
);
};
export default Task;

在TaskList中实现setTaskCompleteHandler, pass作为prop作为Task组件读取的一部分。

Answer 2

你的问题是在你的删除按钮的位置，由div与makrComplete处理程序包装，然后你点击你的删除按钮，markComplete也被触发，所以你的isComplete改变和样式删除。为了防止这种行为，您可以使用preventdefault做一个小技巧。因此，尝试将deleteTaskHandler包装在另一个函数中，像这样:

const deleteButtonClickHandler = (e) => {
e.preventDefault();
e.stopPropagation();
deleteTaskHandler(id)
}

和你的删除按钮应该像这样:

<button onClick={deleteButtonClickHandler}> Delete </button>