Manejo de Eventos en React

Introducción

En el desarrollo web, el manejo de eventos es el proceso de responder a acciones del usuario como clics, pulsaciones de teclas o movimientos del ratón. React proporciona una forma sencilla y declarativa de manejar estos eventos, haciendo que tus aplicaciones sean interactivas.

El sistema de eventos de React es una capa sobre el sistema de eventos nativo del navegador. Los nombres de los eventos se escriben en camelCase, como onClick en lugar de onclick. Pasas una función como manejador de eventos, en lugar de una cadena de texto.

En este laboratorio, aprenderás los conceptos básicos del manejo de eventos en React. Comenzarás con un botón simple y agregarás progresivamente funcionalidad para manejar eventos de clic, acceder a datos de eventos y controlar el comportamiento predeterminado del navegador.

Al final de este laboratorio, podrás:

• Adjuntar un manejador de eventos onClick a un botón.
• Definir una función manejadora dentro de un componente.
• Pasar la función manejadora al atributo de evento correctamente.
• Acceder al objeto de evento para obtener información sobre el evento.
• Prevenir la acción predeterminada del navegador usando event.preventDefault().

Añadir el atributo onClick al elemento button

En este paso, comenzará configurando el entorno de desarrollo y luego añadirá un atributo onClick a un elemento de botón. Este es el primer paso para hacer que un elemento sea interactivo en React.

Primero, naveguemos al directorio del proyecto, instalemos las dependencias necesarias y arranquemos el servidor de desarrollo.

Abra una terminal en el WebIDE y ejecute los siguientes comandos uno por uno:

cd my-app

npm install

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

Después de ejecutar npm run dev, verá una salida que indica que el servidor de desarrollo se está ejecutando. Ahora puede ver su aplicación cambiando a la pestaña Web 8080 en la interfaz de LabEx. Debería ver un simple botón "Click me".

Ahora, añadamos el manejador de eventos. Abra el archivo src/App.jsx desde el explorador de archivos en el lado izquierdo del WebIDE.

Su archivo src/App.jsx se ve actualmente así:

function App() {
  return <button>Click me</button>;
}

export default App;

Para responder a un clic, necesita añadir el atributo onClick al elemento <button>. En React, los atributos de eventos se escriben en camelCase. Por ahora, le pasaremos una función flecha en línea vacía.

Modifique el elemento <button> en src/App.jsx como se muestra a continuación:

function App() {
  return <button onClick={() => {}}>Click me</button>;
}

export default App;

Guarde el archivo. Aunque hacer clic en el botón aún no hará nada visible, ha adjuntado correctamente un oyente de eventos.

Definir la función manejadora dentro del componente

En este paso, definirá una función dedicada dentro de su componente para manejar el evento de clic. Esta es una práctica común que mantiene su JSX limpio y su lógica organizada.

En lugar de escribir la lógica directamente dentro del atributo onClick del JSX, es mejor definir una función separada. Creemos una función llamada handleClick.

En su archivo src/App.jsx, defina la función handleClick dentro del componente App, antes de la declaración return. Por ahora, esta función simplemente registrará un mensaje en la consola.

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

function App() {
  function handleClick() {
    console.log("Button was clicked!");
  }

  return <button onClick={() => {}}>Click me</button>;
}

export default App;

En este punto, ha definido la función handleClick, pero aún no está conectada al evento onClick del botón. En el siguiente paso, aprenderá cómo pasar esta función al atributo onClick.

Pasar el manejador a onClick sin paréntesis

En este paso, conectará la función handleClick que definió al evento onClick del botón. Es muy importante pasar la referencia de la función en sí, no el resultado de llamar a la función.

Para usar su función handleClick como manejador de eventos, necesita pasarla al atributo onClick dentro de llaves {}.

Modifique el elemento <button> en src/App.jsx para pasar handleClick a onClick:

function App() {
  function handleClick() {
    console.log("Button was clicked!");
  }

  return <button onClick={handleClick}>Click me</button>;
}

export default App;

Observe que estamos escribiendo onClick={handleClick}, no onClick={handleClick()}.

• onClick={handleClick} pasa la función en sí. React llamará a esta función cuando se haga clic en el botón.
• onClick={handleClick()} llamaría a la función inmediatamente cuando el componente se renderiza y pasaría su valor de retorno (que es undefined) a onClick. Este es un error común para los principiantes.

Ahora, probémoslo.

1. Guarde el archivo src/App.jsx.
2. Vaya a la pestaña Web 8080.
3. Abra la consola de desarrollador del navegador. Puede hacerlo haciendo clic derecho en la página, seleccionando "Inspect" (Inspeccionar) y luego haciendo clic en la pestaña "Console" (Consola).
4. Haga clic en el botón "Click me".

Debería ver el mensaje "Button was clicked!" aparecer en la consola cada vez que haga clic en el botón.

Acceder al objeto event en el parámetro del manejador

En este paso, aprenderá cómo acceder al objeto de evento que React pasa automáticamente a su manejador de eventos. Este objeto contiene información útil sobre la interacción del usuario.

React pasa un objeto de "evento sintético" a cada manejador de eventos como su primer argumento. Este objeto es un envoltorio multiplataforma (cross-browser) alrededor del evento nativo del navegador, proporcionando una API consistente.

Para acceder a él, necesita agregar un parámetro a su función handleClick. Convencionalmente se llama event o e. Modifiquemos la función para aceptar este parámetro y registrarlo en la consola.

Actualice su archivo src/App.jsx:

function App() {
  function handleClick(event) {
    console.log(event);
  }

  return <button onClick={handleClick}>Click me</button>;
}

export default App;

Ahora, guarde el archivo y vuelva a la pestaña Web 8080. Asegúrese de que su consola de desarrollador todavía esté abierta. Cuando haga clic en el botón, ya no verá una cadena simple. En su lugar, verá un objeto SyntheticBaseEvent registrado en la consola.

Puede expandir este objeto en la consola para inspeccionar sus propiedades. Por ejemplo, puede encontrar:

• event.type: El tipo de evento (por ejemplo, "click").
• event.target: El elemento DOM que desencadenó el evento (el <button>).

Este objeto de evento es potente y le permite leer información y controlar el comportamiento del evento.

Prevenir el comportamiento por defecto con event.preventDefault()

En este paso, aprenderá cómo prevenir la acción por defecto del navegador asociada a un evento. Este es un requisito común, especialmente al manejar envíos de formularios (form submissions).

Algunos eventos del navegador tienen una acción por defecto. Por ejemplo, hacer clic en un enlace navega a una nueva página, y hacer clic en un botón de envío dentro de un <form> envía el formulario, lo que generalmente causa una recarga de página.

Para demostrar esto, envolvamos nuestro botón en un elemento <form>. Por defecto, hacer clic en un botón dentro de un formulario desencadenará un envío de formulario.

Actualice su archivo src/App.jsx para incluir una etiqueta <form>:

function App() {
  function handleClick(event) {
    console.log(event);
  }

  return (
    <form>
      <button onClick={handleClick}>Click me</button>
    </form>
  );
}

export default App;

Si guarda esto y hace clic en el botón ahora, notará que la página se recarga, y es posible que vea brevemente el registro de la consola antes de que desaparezca. Este es el comportamiento de envío por defecto del formulario.

Para prevenir esto, puede llamar a event.preventDefault() dentro de su manejador. Este método le indica al navegador que no realice su acción por defecto.

Modifique la función handleClick para llamar a event.preventDefault():

function App() {
  function handleClick(event) {
    event.preventDefault();
    console.log("Form submission prevented!");
  }

  return (
    <form>
      <button onClick={handleClick}>Click me</button>
    </form>
  );
}

export default App;

Guarde el archivo y vuelva a intentarlo. Ahora, cuando haga clic en el botón en la pestaña Web 8080, la página no se recargará. Verá el mensaje "Form submission prevented!" registrado de forma consistente en la consola. Ha tomado el control del comportamiento del evento con éxito.

Resumen

¡Felicitaciones por completar el laboratorio! Ha aprendido los conceptos fundamentales del manejo de eventos en React.

En este laboratorio, practicó cómo:

• Usar el atributo onClick en JSX para escuchar los clics del usuario.
• Definir funciones manejadoras de eventos dentro de sus componentes para mantener su código organizado.
• Pasar correctamente una referencia de función a una prop de manejador de eventos, evitando la dificultad común de llamar a la función durante la renderización.
• Acceder al objeto de evento sintético que React proporciona, el cual contiene información valiosa sobre la interacción del usuario.
• Usar event.preventDefault() para detener la acción por defecto del navegador, dándole control total sobre la experiencia del usuario.

Estas habilidades son esenciales para construir interfaces de usuario interactivas y dinámicas con React. Puede aplicar estos mismos principios para manejar otros eventos como onChange para entradas (inputs), onMouseOver para efectos de pasar el ratón por encima (hover effects), y muchos más.