reactjs - 我想在按下 react esc 时关闭模态

Question

我们正在使用 react 和 styled-components。
按下按钮时，模态(抽屉)从右侧显示。
我希望在按下 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)};
`;

Answer 1

使用这样的效果来处理这样的键盘事件:

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

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

该效果声明了一个处理 keydown 事件的函数，并检查是否按下了转义键。然后它将事件处理程序绑定(bind)到文档。移除组件后，它会通过从文档中移除事件处理程序来进行清理。