Manejando eventos en JSX

Al trabajar con Javascript nativo, es muy habitual escuchar y gestionar eventos para realizar acciones en determinadas situaciones. Esto se suele hacer escuchando eventos específicos en un elemento HTML y ejecutando funciones cuando se producen los eventos (acciones del usuario, situaciones en la página, etc...).

Eventos en Javascript

Primero, veamos un ejemplo de como se suelen controlar los eventos en HTML y en Javascript.

<button onClick="handleClick()">¡Púlsame!</button>

<script>
  function handleClick() {
    alert("¡Has pulsado el botón!");
  }
</script>

const button = document.querySelector("button");  // Botón HTML

button.addEventListener("click", () => {
  alert("¡Has pulsado el botón!");
});

En React no se deben utilizar los addEventListener(), ya que React posee estrategias alternativas más apropiadas que simplifican la gestión de eventos, haciéndola mucho más sencilla.

Eventos JSX en React

Recordemos que en React no trabajamos directamente con HTML, sino que trabajamos con código JSX. En el ecosistema React se decidió crear una forma muy similar a como se controlan los eventos desde atributos HTML, pero con algunas diferencias, ya que utilizamos JSX.

En la parte de JSX crearemos un atributo onClick, exactamente igual a como se hace en HTML. En su valor, y entre llaves de JSX indicaremos el nombre de la función que queremos ejecutar, y que habremos definido previamente en el interior de nuestro componente:

export function Button() {

  const handleClick = () => {
    alert("¡Has pulsado el botón!");
  }

  return <button onClick={handleClick}>¡Púlsame!</button>;
}

Recuerda que puedes hacer esto con cualquier tipo de evento, simplemente añadiéndole on al nombre del evento y escribiéndolo en camelCase, al igual que se hace en HTML.

Eventos sintéticos

¿Qué ocurre si queremos utilizar parámetros en nuestra función de gestión del evento? ¿O acceder a parámetros concretos como target o key? Veamos un ejemplo utilizando parámetros:

• 1️⃣ En el caso de necesitar información del evento, añadimos un parámetro ev
• 2️⃣ El segundo parámetro es nuestro dato, que recogemos en la función handleClick

export function Button() {

  const handleClick = (ev, text) => {
    alert(`¡Has pulsado el botón con el mensaje ${text}!`);
  }

  return <button onClick={(ev) => handleClick(ev, "test")}>¡Púlsame!</button>;
}

El objeto ev suele ser un objeto asociado al tipo de evento ocurrido. En nuestro caso, que es un evento click suele devolver un objeto PointerEvent. Sin embargo, en React, si hacemos un console.log(ev) comprobaremos que nos devuelve un SyntheticBaseEvent, algo similar a esto:

SyntheticBaseEvent {
  _reactName: "onClick",
  type: "click",
  nativeEvent: PointerEvent,
  target: button,
  ...
}

Un evento sintético es un wrapper, un objeto especial de React que envuelve el evento original (*que lo podemos encontrar en la propiedad nativeEvent). De esta forma, trabaja adaptando al ecosistema de React y nos facilita el trabajo, realizando ciertas tareas de forma automática y transparente:

• 1️⃣ React utiliza delegación de eventos. En lugar de crear un evento para cada elemento, crea uno «global» para todos y los gestiona manualmente. Esto hace que sea más eficiente y reduce el uso de memoria.

• 2️⃣ React no requiere usar removeEventListener() para limpiar los listeners de eventos, sino que lo hace automáticamente. Esto reduce la posibilidad de fugas de memoria y problemas de memoria con escucha de eventos.

• 3️⃣ Aunque ya no es tan relevante, React también ofrece compatibilidad con navegadores antiguos como Internet Explorer, que gestionan los eventos de forma diferente.

Si tienes curiosidad sobre este tipo de eventos del navegador, echa un vistazo al artículo El objeto event de Javascript nativo.