Estoy haciendo una lista de tareas y quiero hacer una función que intercambie tareas por sus prioridades. Por ejemplo:
Ir al gimnasio
aprender reaccionar
Quiero hacer un botón que mueva los elementos hacia arriba y hacia abajo y obtenga:
aprender reaccionar
Ir al gimnasio
Tengo una función que estoy bastante seguro de que funciona correctamente, pero creo que hay un problema en <div> donde uso esta función
const moveUpDown = (currentIndex, nextIndex) =>{ const newCounts = [...todos] const currentCounts = newCounts[currentIndex] const previousCounts = newCounts[nextIndex] newCounts[currentIndex] = previousCounts newCounts[nextIndex] = currentCounts setTodos(newCounts) }Esta es mi devolución:
function ToDo(props) { return ( <div key={props.todo} className="item-todo"> <div className={props.todo.complete ? "item-text strike" : "item-text"} onClick={() => props.toggleTask(props.todo.id)} > {props.todo.task} </div> <div className="item-delete" onClick={() => props.removeTask(props.todo.id)}> X </div> // Lines below I'm using function moveUpDown <div className="item-moveUpDown" disabled = {props.todo === 0} onClick={() => props.moveUpDown(props.todo, props.todo - 1)} > Up </div> <div className="item-moveUpDown" disabled = {props.todo === 0} onClick={() => props.moveUpDown(props.todo, props.todo + 1)} > Down </div> </div> ) }Los parámetros que está pasando a moveUpDown no tienen sentido; parece que deberían ser números, pero está pasando props.todo que es un objeto.
Tal vez si cambiara la función moveUpDown para aceptar el "to do" que desea mover, y un delta para indicar en qué dirección desea moverlo; p.ej:
const moveUpDown = (todo, delta) =>{ const newCounts = [...todos]; // Remove from the array const currentIndex = newCounts.indexOf(todo); newCounts.splice(currentIndex, 1); // Now put it back in at the new position newCounts.splice(currentIndex + delta, 0, todo); setTodos(newCounts) }Ahora puede cambiar sus llamadas, por ejemplo:
<div className="item-moveUpDown" disabled={props.todo === 0} onClick={() => props.moveUpDown(props.todo, 1)} > Down </div> Tenga en cuenta también que su atributo disabled no tiene sentido: props.todo es un objeto, por lo que nunca será igual a cero. ¿Quizás debería pasar el índice del elemento de tareas pendientes como una propiedad separada?