這是我的代碼
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”。如果我單擊它們，它們就會突出顯示。一次只能選擇一個字母，如果再次單擊它們可以取消選擇。那部分作業正常。
我遇到問題的部分是將鍵盤也集成到作業中。
我也希望能夠使用我的鍵盤并做同樣的事情，但用鍵盤代替。就像讓我們說默認情況下 tabIndex 在“A”上。如果我按回車鍵，它會突出顯示“A”
如果我再次按 Enter（取消選擇“A”）
我還應該能夠使用箭頭鍵來移動 tabIndex，例如，如果我使用右鍵，那么它將集中在“B”上。然后當我按下回車鍵時，B 應該被突出顯示
我應該能夠用我的鍵盤自由地導航 A、B、C、D、E。
我正在閱讀 mozilla 中的 tabindex 文章，但我無法弄清楚。我有點輸入作業但按一次后我不確定如何讓tabindex移動。
我的游樂場： https ://codesandbox.io/s/clever-aryabhata-vxoi90?file=/ src/App.tsx:0-1358
uj5u.com熱心網友回復：
首先，您希望tabIndex對所有元素都適用，這樣您就可以使用鍵0按順序瀏覽它們。這是此處屬性Tab的唯一目的。tabIndex
然后，為了通過箭頭鍵導航，您可以檢查ArrowLeft/ ArrowRight event.key，然后.focus()是上一個 / 下一個元素：
if (event.key === "ArrowLeft") {
document.querySelectorAll("#root div div")[i-1]?.focus();
}
if (event.key === "ArrowRight") {
document.querySelectorAll("#root div div")[i 1]?.focus();
}
這是您更新的代碼框：https ://codesandbox.io/s/empty-tdd-8g3prn?file=/src/App.tsx
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/479821.html
標籤：javascript 反应 打字稿