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

Question

我们正在使用react和样式组件。
按下按钮时，从右侧显示模态(抽屉)。
我想在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事件的函数，并检查是否按下了转义键。然后将事件处理程序绑定到文档。当组件被删除时，它通过从文档中删除事件处理程序来进行清理。