Introducción

En React, los formularios funcionan de manera un poco diferente a los formularios HTML tradicionales. En este módulo, aprenderemos cómo manejar formularios en React utilizando componentes controlados. Un componente controlado es aquel que gestiona su propio estado y lo actualiza en respuesta a las entradas del usuario.

Conceptos Clave

Componentes Controlados: Un componente cuyo estado es controlado por React.
Eventos de Formulario: Eventos como onChange, onSubmit, etc., que se utilizan para manejar la entrada del usuario.
Estado del Componente: El estado interno del componente que se actualiza en respuesta a las entradas del usuario.

Ejemplo Práctico

Vamos a crear un formulario simple con un campo de texto y un botón de envío. El formulario mostrará un mensaje de saludo cuando se envíe.

Paso 1: Crear el Componente del Formulario

Primero, crearemos un componente de clase llamado GreetingForm.

import React, { Component } from 'react';

class GreetingForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: ''
    };
  }

  handleChange = (event) => {
    this.setState({ name: event.target.value });
  }

  handleSubmit = (event) => {
    event.preventDefault();
    alert(`Hello, ${this.state.name}!`);
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.name} onChange={this.handleChange} />
        </label>
        <button type="submit">Submit</button>
      </form>
    );
  }
}

export default GreetingForm;

Explicación del Código

Estado Inicial: En el constructor, inicializamos el estado con una propiedad name vacía.
Manejador de Cambios: handleChange es un método que actualiza el estado del componente cada vez que el usuario escribe en el campo de texto.
Manejador de Envío: handleSubmit es un método que se llama cuando el formulario se envía. Evita el comportamiento predeterminado del formulario (recargar la página) y muestra una alerta con el nombre ingresado.
Renderizado: En el método render, creamos un formulario con un campo de texto y un botón de envío. El valor del campo de texto está vinculado al estado del componente, y los eventos onChange y onSubmit están vinculados a sus respectivos manejadores.

Paso 2: Usar el Componente en la Aplicación

Ahora, podemos usar el componente GreetingForm en nuestra aplicación principal.

import React from 'react';
import ReactDOM from 'react-dom';
import GreetingForm from './GreetingForm';

function App() {
  return (
    <div>
      <h1>Controlled Components in React</h1>
      <GreetingForm />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

Ejercicio Práctico

Ejercicio 1: Crear un Formulario de Registro

Crea un formulario de registro con los siguientes campos:

Nombre de usuario
Correo electrónico
Contraseña

El formulario debe mostrar una alerta con los datos ingresados cuando se envíe.

Solución

import React, { Component } from 'react';

class RegistrationForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      email: '',
      password: ''
    };
  }

  handleChange = (event) => {
    const { name, value } = event.target;
    this.setState({ [name]: value });
  }

  handleSubmit = (event) => {
    event.preventDefault();
    const { username, email, password } = this.state;
    alert(`Username: ${username}\nEmail: ${email}\nPassword: ${password}`);
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Username:
          <input type="text" name="username" value={this.state.username} onChange={this.handleChange} />
        </label>
        <br />
        <label>
          Email:
          <input type="email" name="email" value={this.state.email} onChange={this.handleChange} />
        </label>
        <br />
        <label>
          Password:
          <input type="password" name="password" value={this.state.password} onChange={this.handleChange} />
        </label>
        <br />
        <button type="submit">Register</button>
      </form>
    );
  }
}

export default RegistrationForm;

Explicación del Código

Estado Inicial: El estado inicial contiene propiedades para username, email y password.
Manejador de Cambios: handleChange actualiza el estado del componente en función del nombre del campo que se está modificando.
Manejador de Envío: handleSubmit muestra una alerta con los datos ingresados cuando se envía el formulario.

Conclusión

En esta lección, hemos aprendido cómo manejar formularios en React utilizando componentes controlados. Hemos visto cómo vincular el estado del componente a los campos del formulario y cómo manejar eventos de cambio y envío. Estos conceptos son fundamentales para crear aplicaciones interactivas y dinámicas en React.

En el próximo módulo, exploraremos conceptos avanzados de componentes, como elevar el estado y la composición frente a la herencia. ¡Sigue practicando y nos vemos en la siguiente lección!

Formularios y Componentes Controlados

Introducción

Conceptos Clave

Ejemplo Práctico

Paso 1: Crear el Componente del Formulario

Explicación del Código

Paso 2: Usar el Componente en la Aplicación

Ejercicio Práctico

Ejercicio 1: Crear un Formulario de Registro

Solución

Explicación del Código

Conclusión

Curso de React

Módulo 1: Introducción a React

Módulo 2: Componentes de React

Módulo 3: Trabajando con Eventos

Módulo 4: Conceptos Avanzados de Componentes

Módulo 5: Hooks de React

Módulo 6: Enrutamiento en React

Módulo 7: Gestión del Estado

Módulo 8: Optimización del Rendimiento

Módulo 9: Pruebas en React

Módulo 10: Temas Avanzados

Módulo 11: Proyecto: Construyendo una Aplicación Completa