我們正在使用 react 和 styled-components。 當按鈕被按下時，模態（抽屜）從右邊顯示。 我希望在按下esc按鈕時，模態能被關閉。 我怎樣才能檢測到esc按鈕被按下？ codesandbox
import Drawer from "./components/Drawer"/span>;
import { FunctionComponent, useState } from "react"。
const App: FunctionComponent = () => {
const [isOpen, setIsOpen] = useState(false)。
const onClose = (/span>) => {
setIsOpen(false)。
};
return (
<div className="App"/span>>
<button onClick={()/span> => setIsOpen(! isOpen)}>按鈕</按鈕>
< Drawer isOpen={isOpen} onClose={onClose} > </Drawer>>
</Ddiv>
);
};
export default App。
import React from "react";
import styled from "styled-components";
型別 Props = {
isOpen: boolean。
padding?: 數字。
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;
溢位：滾動。
top: 0;
right: 0;
高度: 100vh;
width: ${({ isOpen }: Props) => (isOpen ? 400 : 0）}px;
背景：藍色。
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
過渡：200ms cubic-bezier(0.25, 0.1, 0.24, 1)。
`。
const Overlay = styled.div<{ isOpen: boolean }>`
position: absolute;
頂部。0;
left: 0;
右: 0;
底部。0;
z-index: ${(props: { isOpen: boolean }) => （props.isOpen ? 0 : -1)}。
`。
uj5u.com熱心網友回復：
使用這樣的效果來處理這樣的鍵盤事件：
useEffect(() =>/span> {
function handleEscapeKey（event: KeyboardEvent） {
if (event.code == 'Escape') {
setIsOpen(false)
}
}
document.addEventListener('keydown'/span>, handleEscapeKey)
return () =>/span> document. removeEventListener('keydown'/span>, handleEscapeKey)
}, [])
該效果宣告了一個處理keydown事件的函式，并檢查逃生鍵是否被按下。然后它將該事件處理程式系結到檔案上。當該組件被移除時，它通過從檔案中移除事件處理程式來進行清理。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/332292.html
標籤：