0

Me gustaría saber si es que me pudieran ayudar a entender mejor este código que escribí, me encuentro aprendiendo react y sería de mucha ayuda.

import { useState } from "react";
export function TaskForm() {
  const [title, setTitle] = useState("");
  const manejaSubmit = (e) =>{
    e.preventDefault()
    console.log(title)
  }
  return (
    <form onSubmit={manejaSubmit}>
      <input
        placeholder="Escribe tu tarea"
        onChange={(e) => setTitle(e.target.value)}
      />
      <button>Guardar</button>
    </form>
  );
}

Como primera parte, estoy declarando el useState, el cual se iniciará en vacío. Luego de eso tengo una función que maneja el evento onSubmit de mi formulario, que según tengo entendido está esperando un evento (e) para reaccionar, al tener el preventDefault esto hará que el formulario no recargue la página. Lo que no me queda muy claro es que hace el onChange, sé que estoy guardando lo que se escriba en el input en el setTitle, que lo que hará es que cuando el usuario guarde lo que exista en el input esto quedará en la variable title del useState, sería de mucha ayuda si me pudieran explicar ya que la persona que realiza el curso no le entendí muy bien lo del onChange.

2
  • A grandes rasgos, el evento onChange es exactamente lo que mencionas: guardar lo que escribas en el input, select o elemento del DOM en el estado que especificaste. Posiblemente no te funcione del todo, porque te falta asignar el value en el input => <input value={title} .... />. Pero ya lo tienes bastante claro Commented el 23 dic. 2022 a las 13:47
  • Gracias Paulo por tu aclaración, un abrazo! Commented el 23 dic. 2022 a las 22:39

1 respuesta 1

1

Eyyy, Yo también me encuentro aprendiendo React, es fascinante y complejo pero básicamente lo que hace el onChange fue justamente lo que tu dijiste, capturar un cambio que registre en el input.

Es un evento en forma de función que permite definir una acción a ejecutar cuando ocurre una situación, este caso, cada vez que el usuario escriba algo.

Según veo, estás capturando un texto que se almacenará en la variable de estado "title". Entonces, cuando el usuario intente escribir sobre el input se va a ejecutar el evento onChange en React. "Dentro de este evento, existe una propiedad target que guarda el elemento input. Esto quiere decir que, a través del comando event.target, podemos tener acceso a toda la API del elemento HTML. Así, podemos acceder a todos los atributos del elemento input, como lo son su type y value." -KeepCoding

De este modo, al usar el comando event.target.value se hace que se guarde el dato que se inserta en ese input.

Una vez aplicada, utilizando la función setTitle se actualiza el dato de title y hace que el valor no solo se guarde, sino que también se modifique en el input.

Y así es como se captura los valores de un elemento, en este caso un input, en React con el useState utilizando el onChange.

1
  • Mucha gracias Jose, me gusta mucho react! Commented el 23 dic. 2022 a las 22:39

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.