10-1-Formulario en React

  https://codesandbox.io/p/sandbox/89xp8h?file=%2Fsrc%2FApp.tsx%3A31%2C27

Código del Formulario en React

Vamos a desglosar cada parte para que entiendas completamente cómo funciona:

1. onChange y los Eventos

Sí, onChange es un evento que se dispara cada vez que el valor del input cambia. En React, los eventos se manejan de forma similar a JavaScript puro, pero con algunas diferencias:

• onChange se activa cada vez que:

  • Escribes una letra en el input

  • Borras contenido

  • Pegas texto

El parámetro e que ves en (e) => setNombre(e.target.value) es el objeto del evento que React pasa automáticamente a tu función manejadora.

2. Qué es e.target

e.target es una propiedad del objeto evento que hace referencia al elemento HTML que disparó el evento. En este caso:

• e.target = el elemento <input>

• e.target.value = el valor actual del input (lo que el usuario ha escrito)

3. Flujo Completo del Código

1. Renderizado inicial: El input aparece vacío porque nombre está inicializado como string vacío ('')

2. Cuando el usuario escribe:

   • Se dispara onChange

   • Se ejecuta la función (e) => setNombre(e.target.value)

   • e.target.value contiene el nuevo valor del input

   • setNombre() actualiza el estado nombre

3. Cuando el usuario envía el formulario (hace click o presiona Enter):

   • Se dispara onSubmit

   • e.preventDefault() evita que la página se recargue (comportamiento por defecto de los formularios)

   • Se muestra el alert con el valor actual de nombre

Analogía para entenderlo mejor

Imagina el input como una caja donde el usuario mete papeles (texto):

• onChange es como un sensor que detecta cada vez que meten o sacan un papel

• e es un informe que te dice qué pasó

• e.target te indica exactamente qué caja fue modificada

• e.target.value es el contenido actual de la caja

• setNombre() es como anotar en una pizarra el nuevo contenido de la caja

Versión con comentarios línea por línea

jsx

Copy

Download

import { useState } from 'react';

function FormularioBasico() {
  // Crea un estado 'nombre' inicializado como string vacío
  // setNombre es la función para actualizar este estado
  const [nombre, setNombre] = useState('');

  // Función que se ejecuta al enviar el formulario
  const handleSubmit = (e) => {
    e.preventDefault(); // Evita el comportamiento por defecto del formulario
    alert(`El nombre ingresado es: ${nombre}`); // Muestra el valor actual
  };

  return (
    <form onSubmit={handleSubmit}> {/* Cuando se envía el form, ejecuta handleSubmit */}
      <label>
        Nombre:
        <input 
          type="text" 
          value={nombre} // El valor del input está controlado por el estado 'nombre'
          onChange={(e) => setNombre(e.target.value)} 
          /* Cada cambio ejecuta esta función:
             1. e = evento de cambio
             2. e.target = el input
             3. e.target.value = nuevo valor
             4. setNombre() actualiza el estado
          */
        />
      </label>
      <button type="submit">Enviar</button>
    </form>
  );
}