Obtenez l'événement onKeyDown pour travailler avec les divisions dans React

Les applications Web modernes doivent écouter les événements et déclencher une fonction chaque fois qu’un événement de navigateur spécifique se produit pour répondre aux actions de l’utilisateur. Ces fonctions sont appelées gestionnaires d’événements et sont essentielles pour créer des applications dynamiques dans React.

onKeyDown est l’un des événements les plus utiles de React. Il permet aux développeurs de suivre les entrées de texte et de valider dynamiquement leurs valeurs.

L’article d’aujourd’hui expliquera comment gérer les événements onKeyDown dans React.

Événement onKeyDown dans React

onKeyDown est l’un des événements les plus populaires pour la gestion des entrées de texte. Cet événement est déclenché chaque fois que l’utilisateur appuie sur une touche lors de la sélection du champ de saisie de texte.

La principale différence entre les événements onKeyDown et les événements similaires onKeyPress est ce qui les déclenche. L’événement onKeyDown ne fait pas la différence entre les touches utilisées pour taper des valeurs (chiffres, lettres A-z) et les autres (shift, par exemple).

onKeyPress n’est déclenché que pour les événements qui produisent des lettres, des chiffres ou des symboles. onKeyDown est considéré comme un événement plus moderne et largement pris en charge.

Il est également plus cohérent que l’événement onKeyPress, quelle que soit la version de React que vous utilisez.

onKeyDown pour les Divs dans React

Dans des conditions normales, les développeurs n’écoutent que l’événement onKeyDown sur les entrées de texte.

Les éléments <div> sont normalement des enveloppes et ne prennent aucune entrée. Pour cette raison, le comportement par défaut des éléments <div> empêche onKeyDown de fonctionner.

Pourtant, il n’y a pas lieu de s’inquiéter car un simple correctif nous permet d’utiliser onKeyDown pour les éléments <div>. Si vous souhaitez écouter l’événement onKeyDown sur un <div>, vous devez définir l’attribut tabIndex.

Cet attribut indique si l’élément <div> peut être focalisé ou non. Il traite également de l’ordre des éléments dans la navigation au clavier, en utilisant la touche Tab.

Voici un exemple d’élément <div> qui peut écouter l’événement onKeyDown :

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

Vous pouvez essayer le code vous-même sur playcode.