React - de Cero a Profesional

Manejo de Eventos y Formularios

Manejo de eventos

Aprender a manejar eventos en React es como aprender a dirigir una orquesta. Cada músico (o evento del usuario) espera tu señal para tocar en el momento justo. Vamos a aprender cómo «dirigir» estos eventos en tus componentes React para hacer tu aplicación interactiva y receptiva.

Concepto de Eventos en React

En React, los eventos son acciones que pueden ser desencadenadas por el usuario, como clics del ratón, pulsaciones de teclas, movimientos del ratón, etc. Manejar estos eventos correctamente es fundamental para crear una experiencia de usuario fluida y dinámica.

Cómo React Maneja los Eventos

React envuelve los eventos del navegador nativo en lo que se llama «eventos sintéticos». Esto se hace por varias razones:

  • Consistencia: Los eventos sintéticos aseguran que tienes la misma interfaz en todos los navegadores (incluso si los navegadores tienen diferentes formas de manejar los eventos).
  • Rendimiento: React reutiliza objetos de evento sintético para reducir la carga de memoria.

Ejemplo de Manejo de Eventos

1. Manejar Clics

Supongamos que tienes un botón en tu componente que quieres que haga algo cuando el usuario hace clic en él. Aquí está cómo lo harías en React:

				
					class ClickExample extends React.Component {
  handleClick = () => {
    alert('El botón fue clickeado!');
  };

  render() {
    return <button onClick={this.handleClick}>Hazme clic</button>;
  }
}

En este ejemplo, handleClick es un método en la clase ClickExample que se dispara cuando el botón es clickeado. El evento onClick se asigna a este método.

2. Manejar Entradas de Teclado

Digamos que tienes un campo de entrada y quieres hacer algo con el texto cuando el usuario presiona una tecla:

				
					class KeyPressExample extends React.Component {
  handleKeyPress = (event) => {
    if (event.key === 'Enter') {
      alert(`Input value: ${event.target.value}`);
    }
  };

  render() {
    return <input onKeyPress={this.handleKeyPress} placeholder="Presiona Enter" />;
  }
}

En este caso, handleKeyPress se activa cada vez que se presiona una tecla en el campo de entrada. Si la tecla presionada es «Enter», se muestra una alerta con el valor de entrada.

Buenas Prácticas en el Manejo de Eventos

  • Utiliza Arrow Functions para Manejadores de Eventos: Esto asegura que this dentro de la función maneja correctamente el contexto de tu componente (como se vio en los ejemplos).
  • No uses llamadas de función en línea en exceso: Esto puede llevar a un rendimiento reducido ya que la función se crea de nuevo en cada renderización.
  • Event Pooling: React «vacía» su objeto de evento sintético después de que el evento ha sido manejado. Si necesitas trabajar con el evento de manera asincrónica, debes llamar a event.persist().

Formularios y estado local

Trabajar con formularios en React es un poco como ser un mago que manipula con cuidado el flujo de información secreta. Cada entrada del formulario es un canal místico a través del cual los usuarios envían sus preciados datos. Vamos a ver cómo puedes gestionar esta magia utilizando el estado local de React.

Entendiendo el Estado Local

El estado local en React se refiere a cualquier dato que tu componente debe recordar. Es almacenado en la propiedad state del componente y puede ser actualizado con setState en componentes de clase o useState en componentes funcionales. Este estado es local porque solo pertenece y es accesible dentro del componente donde se define.

Creación de Formularios en React

Cuando construyes formularios en React, gestionar su estado correctamente es crucial para tener un control total sobre la experiencia del usuario y la recopilación de datos.

Ejemplo con un Componente de Clase

Supongamos que quieres crear un formulario simple para registrar un nombre de usuario:

				
					class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { username: '' };
  }

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

  handleSubmit = (event) => {
    alert('Se envió el nombre: ' + this.state.username);
    event.preventDefault();
  };

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

En este componente:

  • handleChange actualiza el estado local cada vez que cambia el contenido del campo de texto.
  • handleSubmit maneja la presentación del formulario, mostrando una alerta con el nombre de usuario y evitando que el formulario se envíe de la manera tradicional (que recargaría la página).

Ejemplo con Componentes Funcionales y Hooks

React Hooks, introducidos en React 16.8, permiten usar estado y otras características de React sin escribir una clase. Aquí está el mismo formulario usando un componente funcional:

				
					function NameForm() {
  const [username, setUsername] = useState('');

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

  const handleSubmit = (event) => {
    alert('Se envió el nombre: ' + username);
    event.preventDefault();
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Nombre:
        <input type="text" value={username} onChange={handleChange} />
      </label>
      <button type="submit">Enviar</button>
    </form>
  );
}

Buenas Prácticas en la Gestión de Formularios

  1. Controlled Components: En React, los componentes controlados son aquellos en los que los datos del formulario se gestionan mediante el estado del componente. Esto te da control total sobre el comportamiento del formulario.
  2. Usar event.preventDefault() en handleSubmit para evitar que la página se recargue.
  3. Validación: Es común realizar validaciones sobre los datos antes de enviar un formulario. Asegúrate de verificar la validez de los datos dentro de handleSubmit.

Recursos