React useKeyPress-Hook

Einführung

In diesem Lab werden wir lernen, wie wir einen benutzerdefinierten React-Hook namens useKeyPress erstellen, der Änderungen im gedrückten Zustand einer bestimmten Taste überwacht. Dieser Hook wird in Situationen nützlich sein, in denen wir feststellen müssen, ob der Benutzer eine bestimmte Taste drückt. Wir werden die Hooks useState und useEffect verwenden, um den Zustand und die Ereignislistener respective zu behandeln.

React useKeyPress-Hook

In der VM wurden bereits index.html und script.js bereitgestellt. Im Allgemeinen müssen Sie nur Code in script.js und style.css hinzufügen.

Diese Funktion überwacht Änderungen im gedrückten Zustand einer bestimmten Taste. Um sie zu verwenden:

• Rufen Sie useKeyPress() mit der Ziel-Taste als Argument auf.
• useKeyPress() gibt einen booleschen Wert zurück, der angibt, ob die Taste derzeit gedrückt ist.
• Die Funktion verwendet den useState()-Hook, um eine Zustandsvariable zu erstellen, die den gedrückten Zustand der angegebenen Taste aufnimmt.
• Sie definiert zwei Handler-Funktionen, die die Zustandsvariable entsprechend beim Drücken oder Loslassen der Taste aktualisieren.
• Der useEffect()-Hook und EventTarget.addEventListener() werden verwendet, um die 'keydown'- und 'keyup'-Ereignisse zu behandeln.
• Schließlich wird EventTarget.removeEventListener() verwendet, um die Bereinigung durchzuführen, nachdem die Komponente abgemounted wurde.

const useKeyPress = (targetKey) => {
  const [isKeyPressed, setKeyPressed] = React.useState(false);

  const handleKeyDown = ({ key }) => {
    if (key === targetKey) setKeyPressed(true);
  };

  const handleKeyUp = ({ key }) => {
    if (key === targetKey) setKeyPressed(false);
  };

  React.useEffect(() => {
    window.addEventListener("keydown", handleKeyDown);
    window.addEventListener("keyup", handleKeyUp);

    return () => {
      window.removeEventListener("keydown", handleKeyDown);
      window.removeEventListener("keyup", handleKeyUp);
    };
  }, [targetKey]);

  return isKeyPressed;
};

Hier ist ein Beispiel für die Verwendung von useKeyPress() in einer React-Komponente:

const MyApp = () => {
  const isWKeyPressed = useKeyPress("w");

  return <p>The "w" key is {!isWKeyPressed ? "not " : ""}pressed!</p>;
};

ReactDOM.render(<MyApp />, document.getElementById("root"));

Bitte klicken Sie in der unteren rechten Ecke auf 'Go Live', um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das React useKeyPress-Hook-Lab abgeschlossen. Sie können in LabEx weitere Labs ausprobieren, um Ihre Fähigkeiten zu verbessern.