Obtenga el evento onKeyDown para trabajar con divisiones en React

Las aplicaciones web modernas tienen que escuchar eventos y activar una función cada vez que ocurre un evento específico del navegador para responder a las acciones del usuario. Estas funciones se denominan controladores de eventos y son esenciales para crear aplicaciones dinámicas en React.

onKeyDown es uno de los eventos más útiles en React. Permite a los desarrolladores realizar un seguimiento de las entradas de texto y validar dinámicamente sus valores.

El artículo de hoy discutirá cómo manejar eventos onKeyDown en React.

Evento onKeyDown en React

onKeyDown es uno de los eventos más populares que manejan entradas de texto. Este evento se activa cada vez que el usuario presiona cualquier tecla mientras selecciona el campo de entrada de texto.

La principal diferencia entre los eventos onKeyDown y onKeyPress similares es lo que hace que se activen. El evento onKeyDown no diferencia entre teclas utilizadas para teclear valores (números, letras A-z) y otras (shift, por ejemplo).

onKeyPress solo se activa para eventos que producen letras, números o símbolos. onKeyDown se considera un evento más moderno y ampliamente compatible.

También es más consistente que el evento onKeyPress, independientemente de la versión de React que esté ejecutando.

onKeyDown para divisiones en React

En condiciones normales, los desarrolladores solo escuchan el evento onKeyDown en las entradas de texto.

Los elementos <div> normalmente son contenedores y no toman ninguna entrada. Por esta razón, el comportamiento predeterminado de los elementos <div> evita que onKeyDown funcione.

Aún así, no hay necesidad de preocuparse porque una solución simple nos permite usar onKeyDown para elementos <div>. Si desea escuchar el evento onKeyDown en un <div>, debe configurar el atributo tabIndex.

Este atributo indica si el elemento <div> se puede enfocar o no. También se ocupa del orden de los elementos en la navegación del teclado, utilizando la tecla Tab.

Aquí hay un ejemplo de un elemento <div> que puede escuchar el evento onKeyDown:

class App extends Component {
  render() {
    return <div tabIndex="0" onKeyDown={() => console.log('key pressed')}>
          Some div
          </div>;
  }
}

Puedes probar el código tú mismo en playcode.