2

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.

introducir la descripción de la imagen aquí

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;

1
  • 3
    Tu problema se debe a la forma de trabajar que tiene el e.target.reset(). Por alguna razón que desconozco, esta función te limpia el input pero evita que se ejecute el evento onChange 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 estado tarea continua vacío. Por lo tanto, yo también pienso que lo mejor es hacerlo de la manera que te recomienda @maxpsz . Commented el 11 oct. 2021 a las 3:04

2 respuestas 2

3

En primer lugar, creo que te va a resultar mucho más sencillo utilizar el input como componente controlado.

Te dejo tu código con un par de cambios que creo que solucionan tu inconveniente:

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 (!nombreTarea.trim()) {
      console.log("No se ha ingresado nada");
      return;
    }

    const nombreTarea = tarea;

    //Agrega la tarea al arreglo
    setlista([...lista, { id: "x", nombreTarea }]);

    //Limpia el campo y useState
    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"
                value={tarea}
                onChange={(e) => setTarea(e.target.value)}
              />
              <button type="submit" className="btn btn-primary ">
                Agregar
              </button>
            </form>
          </div>
        </div>
      </div>
    </>
  );
};

export default FormularioLista;

En caso de que los cambios no salten a simple vista, te cuento:

Agregué value={tarea} en el input, de manera que el contenido del input siempre sea igual al estado tarea, de esta forma evitas tener que estar reseteando el input, solo lo haces con el estado.

Por otra parte, antes de agregar la tarea a la lista, genero una nueva constante const nombreTarea = tarea, esto es para asegurarnos que dicha constante tiene el valor deseado de la tarea que vamos a agregar, ya que de la manera que React maneja internamente sus cambios de estado, no es siempre necesariamente síncrona, y esto puede llevar a errores involuntarios.

Saludos.

1

es porque estas iniciando tu state como vacio const [tarea, setTarea] = useState(" "); y despues tomas el valor anterior y el nuevo valor, y como tu input no tiene ningun valor (value), te crea un objecto desconocido y te agrega los datos que agregas en el input

setlista([...lista, { id: "x", nombreTarea: tarea }]);

en este caso es mejor crear un state con tus valores que deseas agregar, el id, lo veo un poco inecesario, pero como lo declaras como x por default, es igual que iniciarlo desde el inicio del state

const [tarea, setTarea] = useState({
        id: 'x',
        nombreTarea: ''
    });

resolviendo tu problema, quedaria de esta manera y si deseas limpiar el input al hacer el submit, solo llamas el state y declaras los datos vacios

setTarea({ id: 'x', nombreTarea: '' });


import React from "react";
import { useState } from "react";
const FormularioLista = () => {
    const [tarea, setTarea] = useState({
        id: 'x',
        nombreTarea: ''
    });
    const [lista, setlista] = useState([]);

    const enviarDatos = (e) => {
        e.preventDefault();
        console.log('tareas', tarea);

        //Verifica que no este vacio
        if (!tarea?.nombreTarea.trim()) {
            console.log("No se ha ingresado nada");
            return;
        }
        // //Agrega la tarea al arreglo
        setlista(tarea);
        
        //si deseas limpiar el input al hacer el onclick
        setTarea({ id: 'x', nombreTarea: '' });

    };

    const handleChange = e => {
        setTarea({
            ...tarea,
            [e.target.name]: e.target.value
        });
    }

    console.log('tareas', tarea);

    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"
                                name="nombreTarea"
                                value={tarea.nombreTarea}
                                placeholder="Ingrese Tarea"
                                onChange={handleChange}
                            />
                            <button type="submit" className="btn btn-primary ">
                                Agregar
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </>

    );
}

export default FormularioLista;

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.