onKeyPress in React

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

onKeyPress ist Teil der Schnittstelle für Textfelder. Es kann in allen gängigen JavaScript-Frameworks verwendet werden, einschließlich React. Dieser Ereignishandler kann nützlich sein, wenn Sie jedes Mal eine Funktion ausführen möchten, wenn die Benutzer einen Buchstaben, eine Zahl oder etwas anderes in Ihre Felder eingeben. Sie können auch angeben, welche Taste die Ausführung eines Ereignisses auslösen soll.

onKeyPress in React

Gemäss Offizielle Dokumentation zu MDN ist das Ereignis onKeyPress veraltet. Die Entwickler von MDN raten davon ab, es zu verwenden. Verlieren Sie jedoch nicht die Hoffnung – es gibt eine praktikable Alternative, auf die wir in späteren Abschnitten des Artikels eingehen werden.

Wenn Sie das veraltete onKeyPress-Ereignis verwenden möchten, gehen Sie wie folgt vor, um das onKeyPress-Ereignis in React zu behandeln.

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>);
  }
}

Diese Lösung funktioniert in React Version 0.14.7 und auf dem playcode.io React Playground.

Diese Lösung verwendet ein benanntes key-Attribut, um zu überprüfen, ob der Benutzer die Enter-Taste gedrückt hat oder nicht.

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

Alternativ können Sie auch die Attribute charCode oder charKey verwenden, um das Ereignis auszulösen, nachdem der Benutzer eine bestimmte Taste gedrückt hat. Sehen wir uns noch einmal an, wie wir bedingt überprüfen können, ob der Benutzer die Taste Enter gedrückt hat, die einen charCode von 13 hat.

Codebeispiel:

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

Wenn Sie die zuvor verwendete Bedingung durch diese ersetzen, wäre das Ergebnis dasselbe. Tatsächlich ist die Eigenschaft charCode sicherer zu verwenden, da sie in Browsern breiter unterstützt wird als benannte key-Attribute.

Das Attribut keyCode ist weniger vorhersehbar. Im obigen Beispiel, wenn wir console.log(e.keyCode), sehen wir eine 0. Dies liegt daran, dass einige neue Codierungsumgebungen dies nicht unterstützen. Wenn dieses Problem beim Codieren einer App auftritt, können Sie alternativ charCode verwenden.

onKeyPress vs onKeyDown in React

onKeyPress wurde von den HTML-Entwicklern als veraltet markiert. Im Herbst 2021 wird es noch von vielen großen Browsern unterstützt, aber sobald die neueren Browserversionen veröffentlicht werden, wird die Unterstützung für onKeyPress schwinden. Wenn Sie also keinen ganz bestimmten Grund für die Verwendung von onKeyPress haben, verwenden Sie stattdessen onKeyDown, das im Grunde dasselbe tut, mit leichten Unterschieden.

Das Ereignis keyPress wird nur für die Tastaturtasten ausgelöst, die alphanumerische Werte erzeugen. Dazu gehören alle Buchstaben, Zahlen, Satzzeichen und Tasten, die zum Eingeben von Leerzeichen verwendet werden. Modifikatortasten wie Alt, Shift oder Ctrl können das Ereignis onKeyPress nicht auslösen.

onKeyDown wird jedes Mal ausgelöst, wenn eine der Tasten gedrückt wird. Es gibt keinen Unterschied zwischen den Schlüsseln, die alphanumerische Werte erzeugen, und denen, die dies nicht tun. Das Drücken der Tastaturtasten wie Backspace und Caps Lock erzeugt das Ereignis onKeyDown, aber nicht onKeyPress.

onKeyDown in React

Abgesehen von den oben erwähnten geringfügigen Unterschieden ist das Ereignis onKeyDown im Wesentlichen dasselbe wie das Ereignis onKeyPress. Der wichtigste Unterschied besteht darin, dass es derzeit von allen gängigen Browsern unterstützt wird und auch in den kommenden Jahren unterstützt wird.

onKeyDown ist auch konsistenter, unabhängig davon, welche React-Version Sie verwenden.

So würde dieselbe Lösung mit onKeyDown funktionieren:

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>);
  }
}

Beachten Sie, dass wir zur Überprüfung des Schlüssels, der das Ereignis onKeyDown ausgelöst hat, die Eigenschaft keyCode verwenden, die mit onKeyPress nicht zugänglich war.

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

Ebenso können wir auch das benannte Attribut `key` verwenden:

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

So oder so, wenn wir den Eingang auswählen und zweimal auf <kbd>Enter</kbd> klicken, sieht unsere Konsole so aus:

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