Estoy creando una aplicación de tareas pendientes usando React Js. dentro del componente de la tarea, utilicé un estado para aplicar ciertos estilos para la tarea completada y funciona bien. pero, después de hacer clic en cualquier botón de eliminación, se eliminó el estilo de la tarea completada. ¿Cómo puedo prevenir eso?
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;¿Cómo mantiene el estado completo de la tarea en los componentes superiores?
Actualmente no está inicializando el estado completo de la Tarea. Si el objeto de la task contiene la propiedad isComplete, puede usarla como se muestra a continuación
const [isComplete, setIsComplete] = useState(task.isComplete); sin embargo, también debe actualizar el valor de completado en la tarea. Por lo tanto, sugeriría tener todos los componentes inferiores como sin estado. y mantener el estado en el componente superior, es decir, 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; Implemente setTaskCompleteHandler en TaskList y pase como apoyo como parte de la reorganización del componente de Task .
Su problema está en la posición de su botón Eliminar, que está envuelto por div con el controlador makrComplete, por lo que luego hace clic en su botón Eliminar, MarkComplete también se disparó, por lo que su isComplete cambió y los estilos se eliminaron. Para evitar este comportamiento, puede hacer un pequeño truco con la prevención predeterminada. Entonces, intente envolver su deleteTaskHandler en otra función como esa:
const deleteButtonClickHandler = (e) => { e.preventDefault(); e.stopPropagation(); deleteTaskHandler(id) }y su botón de eliminar makrdown debería verse así:
<button onClick={deleteButtonClickHandler}> Delete </button>