Fundamentos de Formularios en React

Introducción

En el desarrollo web, los formularios son esenciales para recopilar la entrada del usuario. En React, el manejo de los datos del formulario es un poco diferente al HTML tradicional. El enfoque recomendado es utilizar una técnica llamada "componentes controlados" (controlled components).

Con los componentes controlados, los datos del formulario son manejados por el estado del componente React. Esto convierte al estado de React en la "única fuente de verdad" (single source of truth), lo que le permite gestionar, validar y responder a la entrada del usuario de manera predecible.

En este laboratorio, construirá un formulario simple con una única entrada de texto y un botón de envío. Aprenderá a:

• Crear elementos de formulario en JSX.
• Utilizar el hook useState para gestionar el valor de la entrada.
• Manejar la entrada del usuario con el evento onChange.
• Procesar envíos de formularios con el evento onSubmit.

Al final de este laboratorio, tendrá una sólida comprensión de los fundamentos de los formularios en React.

Crear elemento de entrada con atributo onChange

En este paso, comenzaremos creando la estructura básica de nuestro formulario. Esto incluye agregar un elemento <form> y un campo de entrada de texto (<input>). También agregaremos el atributo onChange, que es crucial para rastrear los cambios en el valor de la entrada.

Primero, preparemos nuestro entorno de desarrollo. Necesitamos instalar las dependencias del proyecto e iniciar el servidor de desarrollo.

Abra una terminal en el WebIDE y ejecute los siguientes comandos, uno por uno. Asegúrese de estar en el directorio ~/project/my-app.

cd my-app
npm install

Este comando instala todos los paquetes necesarios definidos en package.json.

Ahora, inicie el servidor de desarrollo:

npm run dev -- --host 0.0.0.0 --port 8080

A continuación, navegue al directorio my-app/src en el explorador de archivos de la izquierda y abra el archivo App.jsx. Modificaremos este archivo para agregar nuestro formulario.

Reemplace el contenido de App.jsx con el siguiente código. Estamos agregando una etiqueta <form> y un elemento <input> dentro de ella. El atributo onChange se agrega a la entrada, que se utilizará más adelante para manejar los cambios de valor.

import "./App.css";

function App() {
  return (
    <form>
      <h1>React Form</h1>
      <label>
        Enter your name:
        <input type="text" onChange={() => {}} />
      </label>
    </form>
  );
}

export default App;

Después de guardar el archivo, cambie a la pestaña Web 8080 en la interfaz de LabEx. Debería ver un formulario simple con un campo de entrada de texto. Si no ve los cambios, intente actualizar la pestaña. En este punto, escribir en el campo de entrada no hará nada, pero tenemos la estructura básica implementada.

Manejar el cambio con una función que actualiza el estado

En este paso, haremos que el campo de entrada sea interactivo. Para ello, necesitamos almacenar su valor en el estado del componente. Utilizaremos el hook useState para crear una variable de estado y una función para actualizarla.

Primero, necesitamos importar el hook useState de la biblioteca 'react'. Luego, declararemos una variable de estado, llamémosla name, para almacenar el valor de la entrada.

A continuación, crearemos una función llamada handleChange. Esta función se activará cada vez que el usuario escriba en el campo de entrada. Dentro de esta función, utilizaremos la función setName proporcionada por useState para actualizar nuestro estado name con el valor actual de la entrada, al que podemos acceder a través de event.target.value.

Actualice su archivo App.jsx con el siguiente código:

import { useState } from "react";
import "./App.css";

function App() {
  // Create a state variable 'name' and a function 'setName' to update it
  const [name, setName] = useState("");

  // Define the event handler function
  const handleChange = (event) => {
    setName(event.target.value);
  };

  return (
    <form>
      <h1>React Form</h1>
      <label>
        Enter your name:
        {/* Connect the handler to the onChange event */}
        <input type="text" onChange={handleChange} />
      </label>
    </form>
  );
}

export default App;

Ahora, cuando escriba en el campo de entrada, se llamará a la función handleChange y el estado name se actualizará con cada pulsación de tecla. Aunque aún no puede ver el cambio en la pantalla, el estado del componente ahora está rastreando el valor de la entrada. Esta es la primera mitad de la creación de un componente controlado.

Establecer el atributo value del input al valor del estado

En este paso, completaremos el patrón de "componente controlado". Un componente controlado es aquel cuyo valor de entrada está impulsado por el estado de React, convirtiendo al estado en la "única fuente de verdad".

Para lograr esto, necesitamos vincular el atributo value del elemento <input> directamente a nuestra variable de estado name. Esto crea una vinculación de datos bidireccional:

1. El usuario escribe, activando onChange, lo que actualiza el estado.
2. La actualización del estado provoca una nueva renderización, y el value de la entrada se establece en el nuevo valor del estado.

Esto asegura que la interfaz de usuario esté siempre sincronizada con el estado del componente.

Modifique el elemento <input> en su archivo App.jsx para agregar el atributo value, de la siguiente manera:

import { useState } from "react";
import "./App.css";

function App() {
  const [name, setName] = useState("");

  const handleChange = (event) => {
    setName(event.target.value);
  };

  return (
    <form>
      <h1>React Form</h1>
      <label>
        Enter your name:
        {/* Bind the input's value to the state */}
        <input type="text" value={name} onChange={handleChange} />
      </label>
    </form>
  );
}

export default App;

Después de guardar el archivo, vuelva a la pestaña Web 8080. El formulario se verá igual, pero ahora es un componente completamente controlado. La visualización del campo de entrada ahora está controlada directamente por la variable de estado name en su componente React.

Añadir botón de envío con manejador onClick

Un formulario no está completo sin una forma de enviarlo. En este paso, agregará un botón de envío y un manejador de eventos para procesar el envío del formulario.

La forma estándar y más accesible de manejar envíos de formularios en React es utilizando el evento onSubmit en el propio elemento <form>. Esto asegura que el formulario se pueda enviar haciendo clic en el botón o presionando la tecla "Enter" en un campo de entrada.

Primero, agreguemos un <button> con type="submit" dentro de nuestro formulario. Luego, crearemos una nueva función manejadora, handleSubmit, y la adjuntaremos al atributo onSubmit del elemento <form>.

Actualice su archivo App.jsx con el siguiente código:

import { useState } from "react";
import "./App.css";

function App() {
  const [name, setName] = useState("");

  const handleChange = (event) => {
    setName(event.target.value);
  };

  // Create the submit handler function
  const handleSubmit = (event) => {
    // We will add more logic here in the next step
    console.log("Form was submitted");
  };

  return (
    // Attach the handler to the form's onSubmit event
    <form onSubmit={handleSubmit}>
      <h1>React Form</h1>
      <label>
        Enter your name:
        <input type="text" value={name} onChange={handleChange} />
      </label>
      {/* Add a submit button */}
      <button type="submit">Submit</button>
    </form>
  );
}

export default App;

Ahora, si va a la pestaña Web 8080, verá un botón "Submit". Si hace clic en él, es posible que note que la página se recarga rápidamente. Este es el comportamiento predeterminado del navegador para el envío de formularios, que abordaremos en el paso final.

Prevenir el comportamiento por defecto del envío y registrar los datos del formulario

En este paso final, completará la funcionalidad del formulario. Como notó, hacer clic en el botón de envío provoca una recarga completa de la página. En una Aplicación de Página Única (SPA) como una construida con React, queremos manejar los envíos de formularios usando JavaScript sin recargar la página.

Para hacer esto, necesitamos llamar a event.preventDefault() dentro de nuestra función handleSubmit. El objeto event se pasa automáticamente al manejador de eventos, y este método detiene la acción predeterminada del navegador.

Una vez que hayamos prevenido el comportamiento predeterminado, podemos acceder a los datos enviados desde nuestro estado y hacer algo con ellos, como mostrar una alerta al usuario.

Actualicemos la función handleSubmit en App.jsx para implementar esta lógica.

import { useState } from "react";
import "./App.css";

function App() {
  const [name, setName] = useState("");

  const handleChange = (event) => {
    setName(event.target.value);
  };

  const handleSubmit = (event) => {
    // Prevent the default form submission behavior
    event.preventDefault();
    // Show an alert with the submitted name
    alert(`A name was submitted: ${name}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <h1>React Form</h1>
      <label>
        Enter your name:
        <input type="text" value={name} onChange={handleChange} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

export default App;

Guarde el archivo. Ahora, vaya a la pestaña Web 8080, escriba un nombre en el campo de entrada y haga clic en el botón "Submit". Debería aparecer una alerta con el nombre que ingresó, y la página no se recargará.

¡Felicitaciones! Ha construido con éxito un formulario controlado básico en React.

Resumen

En este laboratorio, aprendió los principios fundamentales para manejar formularios en React utilizando el patrón de "componentes controlados".

Ha logrado con éxito:

• Crear un formulario con un campo de entrada y un botón de envío utilizando JSX.
• Utilizar el hook useState para gestionar los datos del formulario dentro del estado del componente.
• Implementar un manejador de eventos onChange para actualizar el estado a medida que el usuario escribe, manteniendo la interfaz de usuario y el estado sincronizados.
• Manejar el envío del formulario con un manejador de eventos onSubmit, previniendo la recarga predeterminada de la página del navegador mediante el uso de event.preventDefault().
• Acceder a los datos del formulario desde el estado al momento del envío.

Estos conceptos son los pilares para crear formularios más complejos e interactivos en sus aplicaciones React. Ahora puede aplicar este conocimiento para construir formularios con múltiples entradas, diferentes tipos de entrada y lógica de validación.