Das onKeyDown-Ereignis für die Arbeit mit Divs in React nutzen

Moderne Webanwendungen müssen auf Ereignisse lauschen und jedes Mal, wenn ein bestimmtes Browserereignis auftritt, eine Funktion auslösen, um auf Benutzeraktionen zu reagieren. Diese Funktionen werden als Event-Handler bezeichnet und sind für die Erstellung dynamischer Anwendungen in React unerlässlich.

onKeyDown ist eines der nützlichsten Ereignisse in React. Es ermöglicht Entwicklern, Texteingaben zu verfolgen und ihre Werte dynamisch zu validieren.

Im heutigen Artikel wird erläutert, wie mit onKeyDown-Ereignissen in React umgegangen wird.

onKeyDown-Ereignis in React

onKeyDown ist eines der beliebtesten Ereignisse, das Texteingaben behandelt. Dieses Ereignis wird jedes Mal ausgelöst, wenn der Benutzer eine beliebige Taste drückt, während er das Texteingabefeld auswählt.

Der Hauptunterschied zwischen onKeyDown und ähnlichen onKeyPress-Ereignissen besteht darin, was sie auslöst. Das Ereignis onKeyDown unterscheidet nicht zwischen Tasten, die zum Eingeben von Werten (Zahlen, A-Z-Buchstaben) und anderen (z. B. Umschalttaste) verwendet werden.

onKeyPress wird nur bei Ereignissen ausgelöst, die Buchstaben, Zahlen oder Symbole erzeugen. onKeyDown gilt als moderneres und breit abgestütztes Event.

Es ist auch konsistenter als das Ereignis onKeyPress, unabhängig davon, welche Version von React Sie ausführen.

onKeyDown für Divs in React

Unter normalen Bedingungen hören Entwickler bei Texteingaben nur auf das Ereignis onKeyDown.

<div>-Elemente sind normalerweise Wrapper und nehmen keine Eingabe entgegen. Aus diesem Grund verhindert das Standardverhalten von <div>-Elementen, dass onKeyDown funktioniert.

Dennoch besteht kein Grund zur Sorge, denn eine einfache Lösung ermöglicht es uns, onKeyDown für <div>-Elemente zu verwenden. Wenn Sie das Ereignis onKeyDown auf einem <div> hören möchten, müssen Sie das Attribut tabIndex setzen.

Dieses Attribut gibt an, ob das Element <div> fokussiert werden kann oder nicht. Es befasst sich auch mit der Reihenfolge der Elemente in der Tastaturnavigation unter Verwendung der Tab-Taste.

Hier ist ein Beispiel für ein <div>-Element, das auf das onKeyDown-Ereignis lauschen kann:

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

Du kannst den Code auf playcode selbst ausprobieren.