Как повесить обработчик событий onKeyPress на body в react typescript?

Question

Хочу, что-бы при клике на клавишу Enter я открывал свой dropdown. Для этого как я понимаю нужно повесить обработчик событий на body.Как это сделать? Хочу просто менять state на true при клике на Enter.

Answer 1

В useEffect добавить слушатель события на document (только нужно использовать событие keydown вместо keypress):

import { useEffect, useState } from "react";

export default function App() {
  const [isActive, setIsActive] = useState(false);

  const handleKeyDown = (e: KeyboardEvent) => {
    if (e.key === "Enter") {
      setIsActive((prev) => !prev);
    }
  };

  useEffect(() => {
    document.addEventListener("keydown", handleKeyDown);
    return () => {
      document.removeEventListener("keydown", handleKeyDown);
    };
  }, []);

  return <div>Press Enter: {isActive ? "active" : "not active"}</div>;
}

Ссылка на рабочий пример

БЛОГ НА HUSL

Как повесить обработчик событий onKeyPress на body в react typescript?

Ответы (1 шт):