使用 React 和 JavaScript 实现跨类别预测列表的键盘导航-js教程-PHP中文网

使用 React 和 JavaScript 实现跨类别预测列表的键盘导航

DDD

发布： 2025-11-16 13:41:01

原创

197人浏览过

使用 react 和 javascript 实现跨类别预测列表的键盘导航

本文档旨在提供一个清晰的指南，讲解如何在 React 应用中，处理多类别预测列表，并允许用户通过键盘上下键进行导航选择。核心思路是将多类别数据扁平化，利用 `useState` 管理选中项的索引，并通过 props 将选中状态传递给子组件，实现高亮显示。同时，强调了避免使用数组索引作为唯一ID的重要性，并提供完整的代码示例，方便读者理解和应用。

在 React 应用中，实现跨类别预测列表的键盘导航，需要考虑数据的组织形式、状态的管理以及组件间的通信。本教程将详细介绍如何使用 React 和 JavaScript 来实现这一功能，并提供完整的代码示例。

1. 数据结构设计

首先，需要设计合理的数据结构。避免直接使用数组索引作为唯一标识符（ID），因为这可能导致后续维护和调试的困难。推荐为每个预测项和类别都分配一个唯一的 id 属性。

const prediction = {
    id: 1,
    name: "Hello, world!"
};

const category = {
    id: 1,
    name: "First category",
    predictions: [prediction]
};

登录后复制

2. 组件化方案

将应用拆分为三个核心组件：

立即学习“Java免费学习笔记（深入）”；

<Categories>: 负责渲染类别列表，并管理全局的选中状态。
<Category>: 负责渲染单个类别及其包含的预测项。
<Prediction>: 负责渲染单个预测项，并根据是否被选中应用高亮样式。

3. 数据扁平化

为了方便键盘导航，将多层嵌套的类别和预测项数据扁平化为一个一维数组。可以使用 JavaScript 的 flatMap 方法来实现。

const Categories = ({ categories }) => {
    const allItems = categories.flatMap(x => x.predictions);
    // ...
};

登录后复制

4. 状态管理

使用 React 的 useState Hook 来管理当前选中项的索引 selectedIndex。

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

const Categories = ({ categories }) => {
    const allItems = categories.flatMap(x => x.predictions);
    const [selectedIndex, setSelectedIndex] = React.useState(0);
    const selectedItem = allItems[selectedIndex];

    // ...
};

登录后复制

selectedItem 存储了当前选中项的信息。

5. 组件间通信

将当前选中项的 id 通过 props 传递给子组件，以便它们能够判断自身是否被选中。

// <Categories>
{categories.map(x => <Category
    key={x.id}
    ...
    selectedId={selectedItem.id} />)}

// <Prediction>
const Prediction = ({ id, name, selectedId }) => {
    const isSelected = id === selectedId;
    return <li className={isSelected ? "highlight" : ""}>{name}</li>;
};

登录后复制

6. 键盘事件处理

在 <Categories> 组件上绑定 onKeyUp 事件，并根据按键类型更新 selectedIndex。需要进行边界检查，防止索引超出范围。

const Categories = ({ categories }) => {
    // ...

    const onKeyUp = (event) => {
        switch (event.code) {
            case "ArrowUp":
                setSelectedIndex(Math.max(0, selectedIndex - 1));
                break;
            case "ArrowDown":
                setSelectedIndex(
                    Math.min(allItems.length - 1, selectedIndex + 1)
                );
                break;
        }
    };

    return (<div onKeyUp={onKeyUp} tabIndex={-1}>
        ...
    </div>);
};

登录后复制

tabIndex="-1" 属性使得 div 元素可以接收键盘事件。

7. 完整示例代码

// Example data here.
const teeShirts = [
    { id: 1, name: "Black" },
    { id: 2, name: "Red" },
    { id: 3, name: "Blue" },
];

const accessories = [
    { id: 4, name: "Cool Cap" },
    { id: 5, name: "Fancy Tie" },
    { id: 6, name: "Medallion" },
];

const countries = [
    { id: 7, name: "United Kingdom" },
    { id: 8, name: "United States" },
    { id: 9, name: "Australia" },
];

const categories = [
    { id: 1, name: "T-Shirts", predictions: teeShirts },
    { id: 2, name: "Accessories", predictions: accessories },
    { id: 3, name: "Countries", predictions: countries },
];

const Categories = ({ categories }) => {
    const allItems = categories.flatMap((x) => x.predictions);
    const [selectedIndex, setSelectedIndex] = React.useState(0);
    const selectedItem = allItems[selectedIndex];

    const onKeyUp = (event) => {
        switch (event.code) {
            case "ArrowUp":
                setSelectedIndex(Math.max(0, selectedIndex - 1));
                break;
            case "ArrowDown":
                setSelectedIndex(
                    Math.min(allItems.length - 1, selectedIndex + 1)
                );
                break;
        }
    };

    return (
        <div onKeyUp={onKeyUp} tabIndex={-1}>
            {categories.map((category) => (
                <Category
                    key={category.name}
                    id={category.id}
                    name={category.name}
                    predictions={category.predictions}
                    selectedId={selectedItem.id}
                />
            ))}
        </div>
    );
};

const Category = ({ name, predictions, selectedId }) => {
    return (
        <div>
            {name}
            <ul role="listbox">
                {predictions.map((prediction) => (
                    <Prediction
                        key={prediction.name}
                        id={prediction.id}
                        name={prediction.name}
                        selectedId={selectedId}
                    />
                ))}
            </ul>
        </div>
    );
};

const Prediction = ({ id, name, selectedId }) => {
    const isSelected = id === selectedId;
    return <li className={isSelected ? "highlight" : ""}>{name}</li>;
};

// This is just bootstrapping so the example works
const App = () => {
    return <Categories categories={categories} />;
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);

登录后复制

.highlight {
  color: red;
  font-weight: bold;
}

登录后复制

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>

<div id="root"></div>

登录后复制