如何增加 React ul-li 搜索結果中的 tabindex？

Question

我使用ul li來實現搜索結果：

<ul className="search-result">
  <li tabindex="1">title here...</li>
  <li tabindex="2">title here...</li>
  <li tabindex="3">title here...</li>
.
.
.
</ul>

這是每個項目的樣式：

.search-result{
 li:active, li:focuse {
  font-weight: bold;
  background: #f0f0f0;
 }
}

但我正在嘗試添加一項功能，客戶端可以使用鍵盤上的向下鍵或向上鍵按鈕在結果項之間導航。 但是我如何訪問文檔中當前活動的tabindex以增加或減少 JavaScript 而不是tab按鈕？

Answer 1

您是否要切換到每個<li> （搜索結果）並使用向上/向下箭頭鍵在列表中導航？

為tabindex使用正值時必須小心。 它應該很少被使用，因為它改變了大多數用戶習慣的默認瀏覽器焦點順序。 默認的焦點順序是 DOM 順序。 在您的情況下，如果您希望用戶按順序切換到每個<li> ，則不需要為tabindex設置tabindex ，因為您的<li>元素已經按照您希望它們切換到的順序排列。 只需將它們全部設置為 0。值為 0 意味着 DOM 元素應按正常 DOM 順序插入 Tab 鍵順序。

<ul className="search-result">
  <li tabindex="0">title here...</li>
  <li tabindex="0">title here...</li>
  <li tabindex="0">title here...</li>
.
.
.
</ul>

現在，話雖如此，如果元素是交互式元素，則它們只應具有tabindex="0" 。 <li>通常不是交互式元素，因此使用 Tab 鍵會讓人感到困惑。 用戶跳轉到<li>后可以做什么？ 他們可以按回車鍵或空格鍵輸入 select 嗎？ 如果用戶不能與那個元素交互，那么它不應該是制表位。

通常， <li>包含可交互的內容，例如鏈接、按鈕、復選框等。默認情況下，這些元素已經是制表位，不需要tabindex 。

至於使用向上/向下箭頭鍵進行導航，同樣，您應該只能將箭頭指向交互式元素。 我通常在<ul>上有一個onkeydown處理程序，它會偵聽箭頭鍵並調整每個項目的 tabindex。 但是我只在我希望我的整個列表是一個制表位並且用戶必須在每個列表項之間向上/向下箭頭指向 go 時才這樣做。 在你的情況下，聽起來你想要這兩種行為，這就是為什么我在回答開始時問了這個問題。

如果將列表視為一個制表位，則所有<li>元素都將具有tabindex="-1" ，但具有焦點的<li>除外。 它將有tabindex="0" 。 通過這種方式，用戶可以跳轉到整個列表，焦點將 go 移至上次獲得焦點的列表項。 然后用戶可以向上/向下瀏覽列表。

當用戶按下上/下鍵時，您所要做的就是將當前聚焦的列表項的tabindex從 0 更改為 -1，並將焦點移動到的列表項的tabindex從 -1 更改為 0，然后調用focus()在新聚焦的元素上。

Answer 2

您需要在 state 中存儲當前選項卡索引並在 keydown eventListener 中更新它

import "./styles.css";
import { useState, useEffect } from "react";
import users from "./data";

export default function App() {
  const [searchValue, setSearchValue] = useState("");
  const [currentTab, setCurrentTab] = useState(0);
  const searchResults = users.filter(
    (user) => searchValue.trim() && user.includes(searchValue.trim())
  );
  useEffect(() => {
    const handleKeyDown = (e) => {
      const keyCode = e.keyCode;
      if (keyCode == 38 && searchResults.length - 1 > currentTab)
        setCurrentTab(currentTab + 1);
      if (keyCode == 40 && currentTab >= 1) setCurrentTab(currentTab - 1);
    };
    window.addEventListener("keydown", handleKeyDown);
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, [searchResults, currentTab]);
  return (
    <div>
      <input
        type="text"
        value={searchValue}
        onChange={(e) => {
          setSearchValue(e.target.value);
          setCurrentTab(0);
        }}
      />
      <ul className="search-result">
        {searchResults.map((result, i) => (
          <li className={currentTab === i ? "active" : ""}>{result}</li>
        ))}
      </ul>
    </div>
  );
}

我創建了一個沙箱，你可以檢查一下