Javascript 如何在 React 中使用键盘事件来制作小部件键盘

这是我的密码

import React, { useState, useRef } from "react";

const alphabet = ["A", "B", "C", "D", "E"];

export default function App() {
  const [selected, setSelected] = useState<number | null>(null);
  const selectedRef = useRef<HTMLDivElement>(null);

  const selectLetter = (i: number) => {
    if (selected === i) {
      setSelected(null);
    } else {
      setSelected(i);
    }
  };

  const navigate = (
    event: React.KeyboardEvent<HTMLDivElement>,
    letter: string,
    i: number
  ) => {
    if (event.key === "Enter") {
      if (i === selected) {
        setSelected(null);
      } else {
        setSelected(i);
      }
    }
  };

  return (
    <div
      tabIndex={-1}
      style={{
        display: "flex",
        gap: "5px",
        flexWrap: "wrap"
      }}
    >
      {alphabet.map((letter: string, i: number) => (
        <div
          ref={selected === i ? selectedRef : null}
          onClick={() => selectLetter(i)}
          onKeyDown={(event) => navigate(event, letter, i)}
          tabIndex={selected === i ? 0 : -1}
          style={{
            border: "1px solid blue",
            padding: "30px",
            backgroundColor: i === selected ? "blue" : "white",
            color: i === selected ? "white" : "black",
            fontWeight: "bolder",
            cursor: "pointer"
          }}
        >
          {letter}
        </div>
      ))}
    </div>
  );
}

我有字母"A"、"B"、"C"、"D"、"E".如果我单击它们，它们就会突出显示.一次只能 Select 一个字母，如果再次单击，则可以取消 Select .那部分很好用.

我遇到的问题是如何将键盘集成到工作中.

我也希望能够使用我的键盘，做同样的事情，但用键盘代替.让我们假设默认情况下tabIndex位于"A"上.如果我按enter键，它将突出显示"A"

如果我再次按enter键(取消 Select "A")

我还应该能够使用箭头键来移动tabIndex，例如，如果我使用右键，那么它将集中在"B"上.然后当我按enter键时，B应该高亮显示

我应该能够自由地用键盘导航A、B、C、D、E.

我正在mozilla上读tabindex的文章，我就是想不出来.我有点让enter工作，但按下一次后，我不确定如何让tabindex移动.

我的playground :https://codesandbox.io/s/clever-aryabhata-vxoi90?file=/src/App.tsx:0-1358