Блог

Мы используем компоненты react и style.
При нажатии кнопки справа отображается модальный(выдвижной ящик).
Я хочу, чтобы модальный режим закрывался при нажатии кнопки esc.
Как я могу определить, что кнопка esc была нажата? codesandbox

 import Drawer from "./components/Drawer";
import { FunctionComponent, useState } from "react";

const App: FunctionComponent = () => {
  const [isOpen, setIsOpen] = useState(false);
  const onClose = () => {
    setIsOpen(false);
  };
  return (
    <div className="App">
      <button onClick={() => setIsOpen(!isOpen)}>button</button>
      <Drawer isOpen={isOpen} onClose={onClose}></Drawer>
    </div>
  );
};

export default App;
 

 import React from "react";
import styled from "styled-components";

type Props = {
  isOpen: boolean;
  padding?: number;
  children: React.ReactNode;
  onClose: () => void;
  handleKeyDown: () => void;
};

export default (props: Props) => {
  return (
    <>
      <Overlay isOpen={props.isOpen} onClick={props.onClose} />
      <DrawerModal {...props}>{props.children}</DrawerModal>
    </>
  );
};

const DrawerModal = styled.div<Props>`
  position: absolute;
  overflow: scroll;
  top: 0;
  right: 0;
  height: 100vh;
  width: ${({ isOpen }: Props) => (isOpen ? 400 : 0)}px;
  background: blue;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
  transition: 200ms cubic-bezier(0.25, 0.1, 0.24, 1);
`;

const Overlay = styled.div<{ isOpen: boolean }>`
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: ${(props: { isOpen: boolean }) => (props.isOpen ? 0 : -1)};
`;

 

Используйте подобный эффект для обработки событий клавиатуры, подобных этому:

 useEffect(() => {
  function handleEscapeKey(event: KeyboardEvent) {
    if (event.code === 'Escape') {
      setIsOpen(false)
    }
  }

  document.addEventListener('keydown', handleEscapeKey)
  return () => document.removeEventListener('keydown', handleEscapeKey)
}, [])
 

Эффект объявляет функцию, которая обрабатывает keydown событие, и проверяет, была ли нажата клавиша escape. Затем он привязывает этот обработчик событий к документу. Когда компонент удаляется, он очищается, удаляя обработчик событий из документа.