Capturar el teclado y liberar eventos

Un evento de teclado informa de la tecla pulsada. Para un campo concreto puedes usar onKeyDown; si necesitas escuchar en la ventana, registra un listener y elimínalo cuando ya no haga falta.

1import { useEffect, useState } from 'react';
2
3export default function Ejem_16() {
4  const [myKey, setMyKey] = useState('');
5
6  useEffect(() => {
7    function controlTecla(event: KeyboardEvent) {
8      setMyKey(event.key);
9    }
10
11    window.addEventListener('keydown', controlTecla);
12    return () => {
13      window.removeEventListener('keydown', controlTecla);
14    };
15  }, []);
16
17  return <p>La última tecla pulsada es: {myKey || 'ninguna todavía'}</p>;
18}

event.key contiene valores como 'a', 'Enter' o 'ArrowLeft'. Mantenemos la función dentro del efecto porque solo se utiliza allí y no necesita leer estado del componente.

La referencia debe ser la misma #

La limpieza utiliza el mismo objeto de función controlTecla que se pasó a addEventListener. Crear otra flecha nueva en removeEventListener no eliminaría el listener anterior, aunque su código fuera igual.

En este caso KeyboardEvent es el evento nativo del navegador. En onKeyDown de un elemento JSX, el manejador recibe el tipo de evento de React, por ejemplo KeyboardEvent<HTMLInputElement> importado desde react. Son APIs relacionadas con tipos diferentes.

Evento global o evento local #

Escuchar en window es útil para una práctica o un atajo de aplicación, pero recibe eventos que pueden venir de un campo de texto. En una aplicación real conviene comprobar el elemento de origen para no interferir con la escritura.

Una tecla mantenida puede generar varios eventos keydown. event.repeat permite reconocer las repeticiones. preventDefault() evita la acción habitual del navegador solo cuando el comportamiento diseñado lo requiere; no lo apliques a todas las teclas sin motivo.

Prueba tú #

Muestra este componente de forma condicional desde un padre. Al ocultarlo, su listener debe eliminarse. Después añade un mensaje especial cuando event.key sea 'Escape'.

Cuestionario del tema #

Abre el cuestionario en las actividades de este tema para comprobar lo aprendido. Cada respuesta incluye una explicación.