onKeyPress dans React

1. onKeyPress dans React
2. onKeyPress vs onKeyDown dans React
3. onKeyDown dans React

onKeyPress fait partie de l’interface pour les champs de texte. Il peut être utilisé dans tous les principaux frameworks JavaScript, y compris React. Ce gestionnaire d’événements peut être utile lorsque vous souhaitez exécuter une fonction à chaque fois que les utilisateurs tapent une lettre, un chiffre ou autre chose dans vos champs. Vous pouvez également spécifier quelle clé doit déclencher l’exécution d’un événement.

onKeyPress dans React

Selon Documentation officielle sur MDN, l’événement onKeyPress est obsolète. Les développeurs de MDN ne recommandent pas de l’utiliser. Cependant, ne perdez pas espoir - il existe une alternative viable, dont nous discuterons dans les sections suivantes de l’article.

Si vous souhaitez utiliser l’événement obsolète onKeyPress, voici comment gérer l’événement onKeyPress dans React.

class App extends Component {
  render() {
    console.log('App started');
    this.handleKeyPress = (e) => {
      if (e.key === 'Enter') {
        console.log('You must have pressed Enter ')
      }
    } return (<div><input type = 'textfield' id = 'text' onKeyPress = {
      this.handleKeyPress
    } />
         </div>);
  }
}

Cette solution fonctionne dans React version 0.14.7, et sur le terrain de jeu React playcode.io.

Cette solution utilise un attribut nommé key pour vérifier si l’utilisateur a appuyé ou non sur la touche Enter.

if (e.key === 'Enter') {
  console.log('You must have pressed Enter ')
}

Alternativement, vous pouvez également utiliser les attributs charCode ou charKey pour déclencher l’événement après que l’utilisateur appuie sur une touche spécifique. Encore une fois, voyons comment nous pouvons vérifier conditionnellement que l’utilisateur a appuyé sur la touche Enter, qui a un charCode de 13.

Exemple de code :

if (e.charCode === 13) {
  console.log('You must have pressed Enter ')
}

Si vous remplaciez le conditionnel précédemment utilisé par celui-ci, le résultat serait le même. En fait, la propriété charCode est plus sûre à utiliser, car elle est plus largement supportée dans les navigateurs que les attributs nommés key.

L’attribut keyCode est moins prévisible. Dans l’exemple ci-dessus, si nous console.log(e.keyCode), nous allons voir un 0. C’est parce que certains nouveaux environnements de codage ne le prennent pas en charge. Si vous rencontrez ce problème lors du codage d’une application, vous pouvez utiliser charCode comme alternative.

onKeyPress vs onKeyDown dans React

onKeyPress a été déprécié par les développeurs de HTML. À l’automne 2021, de nombreux principaux navigateurs le prennent toujours en charge, mais une fois les nouvelles versions de navigateur publiées, la prise en charge de onKeyPress diminuera. Donc, à moins que vous n’ayez une raison très spécifique d’utiliser onKeyPress, utilisez plutôt onKeyDown, qui fait fondamentalement la même chose, avec de légères différences.

L’événement keyPress ne se déclenche que pour les touches du clavier qui produisent des valeurs alphanumériques. Ceux-ci incluent toutes les lettres, les chiffres, la ponctuation et les touches utilisées pour taper des espaces. Les touches de modification, telles que Alt, Shift ou Ctrl ne peuvent pas déclencher l’événement onKeyPress.

onKeyDown est déclenché à chaque fois que l’une des touches est enfoncée. Il n’y a pas de différence entre les clés qui produisent des valeurs alphanumériques et celles qui n’en produisent pas. Appuyer sur les touches du clavier comme Backspace et Caps Lock générera l’événement onKeyDown, mais pas onKeyPress.

onKeyDown dans React

À l’exception des différences mineures mentionnées ci-dessus, l’événement onKeyDown est essentiellement le même que onKeyPress. La différence la plus importante est qu’il est actuellement pris en charge par tous les principaux navigateurs et qu’il le sera pendant des années.

onKeyDown est également plus cohérent, quelle que soit la version de React que vous utilisez.

Voici comment la même solution fonctionnerait avec onKeyDown :

class App extends Component {
  render() {
    console.log('App started');
    this.handleKeyDown = (e) => {
      if (e.keyCode === 13) {
        console.log('You must have pressed Enter ')
      }
    } return (<div><input type = 'textfield' id = 'text' onKeyDown = {
      this.handleKeyDown
    } />
         </div>);
  }
}

Notez que pour vérifier la clé qui a déclenché l’événement onKeyDown, nous utilisons la propriété keyCode, qui n’était pas accessible avec onKeyPress.

if (e.keyCode === 13) ```

De même, on peut aussi utiliser l'attribut nommé `key` :

```javascript
if (e.key === 'Enter') ```

Dans tous les cas, si nous sélectionnons l'entrée et cliquons deux fois sur <kbd>Enter</kbd>, voici à quoi ressemblera notre console :

![onKeyDown dans React](</img/React/console onKeyDown.webp>)