goddonebianu/learn-languages
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修复了按键监听的问题

Browse Source
This commit is contained in:
goddonebianu
2025-10-09 11:51:43 +08:00
parent 4829ab9531
commit 9d4d2c6299
3 changed files with 36 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/app/alphabet/MemoryCard.tsx
View File

@@ -2,7 +2,7 @@ import Button from "@/components/Button";
import IconClick from "@/components/IconClick";
import IMAGES from "@/config/images";
import { Letter, SupportedAlphabets } from "@/interfaces";
import { Dispatch, SetStateAction, useRef, useState } from "react";
import { Dispatch, KeyboardEvent, SetStateAction, useEffect, useRef, useState } from "react";
export default function MemoryCard(
{
@@ -19,9 +19,21 @@ export default function MemoryCard(
const [more, setMore] = useState(false);
const [ipaDisplay, setIPADisplay] = useState(true);
const [letterDisplay, setLetterDisplay] = useState(true);
useEffect(() => {
const handleKeydown = (e: globalThis.KeyboardEvent) => {
if (e.key === ' ') refresh();
}
document.addEventListener('keydown', handleKeydown);
return () => document.removeEventListener('keydown', handleKeydown);
});
const letter = alphabet[index];
const refresh = () => {
setIndex(Math.floor(Math.random() * alphabet.length));
}
return (
<div className="w-full flex justify-center items-center">
<div className="w-full flex justify-center items-center" onKeyDown={(e: KeyboardEvent<HTMLDivElement>) => e.preventDefault()}>
<div className="m-4 p-4 w-full md:w-[60dvw] flex-col rounded-2xl shadow border-gray-200 border flex justify-center items-center">
<div className="w-full flex justify-end items-center">
<IconClick size={32} alt="close" src={IMAGES.close} onClick={() => setChosenAlphabet(null)}></IconClick>
@@ -31,7 +43,7 @@ export default function MemoryCard(
<span className="text-5xl md:text-7xl text-gray-400">{ipaDisplay ? letter.letter_sound_ipa : ''}</span>
</div>
<div className="flex flex-row mt-32 items-center justify-center gap-2">
<IconClick size={48} alt="refresh" src={IMAGES.refresh} onClick={() => setIndex(Math.floor(Math.random() * alphabet.length))}></IconClick>
<IconClick size={48} alt="refresh" src={IMAGES.refresh} onClick={refresh}></IconClick>
<IconClick size={48} alt="more" src={IMAGES.more_horiz} onClick={() => setMore(!more)}></IconClick>
{
more ? (<>