Eventos en React

Aprender a manejar eventos en React es clave para construir interfaces interactivas. Te dejo una guía clara y sencilla con ejemplos de los eventos más comunes: onClick, onChange, y onSubmit, junto con cómo se manejan las funciones de evento.

Prerrequisitos

• Instalación react se explica a detalle como instar y configurar un entono de trabajo para react.
• Estructura de un proyecto React    Conocer los archivos principales, index.js, App.js, carpetas, etc.
• JSX  Sintaxis básica, reglas JSX, expresiones, fragmentos (<> </>).
• En el post de componentes en React se dan los primeros pasos para crear un componente.

Crear un proyecto de prueba

Antes de explicar los Hooks, vamos a crear un proyecto react para realizar los ejercicios que explicaremos a continuación:

npm create vite@latest

Donde seleccionamos:

> npx
> create-vite
|
o  Project name:
|  practicas-react
|
o  Select a framework:
|  React
|
o  Select a variant:
|  TypeScript

Por ultimo, ejecutamos

cd practicas-react
npm install
npm run dev

Vamos a crear un directorio llamado components en el directorio src donde crearemos los componentes de los hooks

✅ onClick

En React, el evento onClick se utiliza para manejar clics en elementos del DOM, como botones. Se define dentro de la etiqueta del elemento usando la sintaxis onClick={nombreDeLaFuncion}. La función especificada se ejecutará cuando se haga clic en ese elemento. 

import React from "react";

function BotonEjemplo() {
  const manejarClick = () => {
    alert("¡Hiciste clic!");
  };
  return <button onClick={manejarClick}> Haz clic aquí </button>;
}

export default BotonEjemplo;

✅ onChange

En React, onChange es un atributo utilizado para manejar eventos de cambio en elementos de formulario, como campos de entrada de texto, selectores, etc. Se activa cada vez que el usuario modifica el valor del elemento. Es un atributo fundamental para crear formularios controlados en React, donde el estado del componente gestiona los valores de los campos de entrada. 

import React, { useState } from "react";

function InputEjemplo() {
  const [texto, setTexto] = useState("");
  const manejarCambio = (event) => {
    setTexto(event.target.value);
  };
  return (
    <div>
      {" "}
      <input type="text" value={texto} onChange={manejarCambio} />{" "}
      <p>Escribiste: {texto}</p>{" "}
    </div>
  );
}

export default InputEjemplo;

✅ onSubmit

En React, onSubmit es un atributo que se utiliza en el elemento <form> para manejar el evento de envío del formulario. Al hacer clic en el botón de enviar o presionar Enter dentro del formulario, se ejecuta la función especificada en onSubmit. Esta función permite procesar los datos del formulario, validar la entrada del usuario, prevenir la recarga de la página y realizar otras acciones necesarias. 

import React, { useState } from "react";

function FormularioEjemplo() {
  const [nombre, setNombre] = useState("");

  const manejarEnvio = (event) => {
    event.preventDefault();
    // Previene que se recargue la página
    alert(`Formulario enviado con nombre: ${nombre}`);
  };
  return (
    <form onSubmit={manejarEnvio}>
      {" "}
      <input
        type="text"
        value={nombre}
        onChange={(e) => setNombre(e.target.value)}
        placeholder="Tu nombre"
      />{" "}
      <button type="submit">Enviar</button>{" "}
    </form>
  );
}

export default FormularioEjemplo;

🔄 ¿Qué es una función de evento?

Una función de evento es una función que se ejecuta como respuesta a un evento del usuario (clic, cambio de texto, envío de formulario, etc.). Se suele pasar como referencia en las props como onClick={miFuncion}.

Por ejemplo:

const manejarClick = () => { console.log("Esto es una función de evento"); };