Tengo un input trabajando con useState y el evento onChange. Al apretar agregar texto, visualizo con la extensión "React Developer Tools" como se agrega a mi arreglo. El problema surge cuando ingreso un único carácter, por ejemplo "w", me lo ingresa correctamente, pero si vuelvo a colocar "w" no aparece y no genera ningún cambio. Esto solo ocurre cuando ingreso un carácter y luego quiero volver a ingresar el mismo. ¿ A que se debe ?
Coloque un reset en el input y también limpio el State pero aun sigue el problema.
En esta imagen ingrese el caracter "f" aparecio en el primer State, aprete "Agregar" y se agrego al segundo State y se limpiaron los datos. Nuevamente volvi a colocar "f" y no aparece, y al apretar "Agregar" en consola me devuelve el mensaje de campo vacio, pero si coloco cualquier otro caracter, si lo reconoce y lo agrega.
import React from "react";
import { useState } from "react";
const FormularioLista = () => {
const [tarea, setTarea] = useState(" ");
const [lista, setlista] = useState([]);
const enviarDatos = (e) => {
e.preventDefault();
//Verifica que no este vacio
if (!tarea.trim()) {
console.log("No se ha ingresado nada");
return;
}
//Agrega la tarea al arreglo
setlista([...lista, { id: "x", nombreTarea: tarea }]);
//Limpia el campo y useState
e.target.reset();
setTarea("");
};
return (
<>
<div className="container">
<h1 className="text-center mb-4">Crud Simple</h1>
<div className="row">
<div className="col-5 border">
<h4 className="text-center">Agregar Tarea</h4>
<form onSubmit={enviarDatos}>
<input
type="text"
className="form-control mt-3 mb-2"
placeholder="Ingrese Tarea"
onChange={(e) => setTarea(e.target.value)}
/>
<button type="submit" className="btn btn-primary ">
Agregar
</button>
</form>
</div>
</div>
</div>
</>
);
};
export default FormularioLista;
e.target.reset()
. Por alguna razón que desconozco, esta función te limpia el input pero evita que se ejecute el eventoonChange
al ingresar el primer carácter luego del reinicio. Lo que hace que al tocar el botón "Agregar", por consola te diga que no ingresaste datos porque nunca se ejecutó dicho evento, y entonces el estadotarea
continua vacío. Por lo tanto, yo también pienso que lo mejor es hacerlo de la manera que te recomienda @maxpsz .