React多层级列表的统一序号管理与键盘交互实现教程-js教程-PHP中文网

React多层级列表的统一序号管理与键盘交互实现教程

本教程详细讲解如何在react应用中，针对包含多个分类的嵌套列表，实现统一的序列号管理，并支持通过键盘上下箭头进行导航和高亮显示。核心方法包括扁平化数据结构以简化索引计算、利用react状态管理当前选中项、以及通过事件监听器处理键盘输入，确保用户能够流畅地进行列表项选择，同时避免直接使用数组索引作为唯一标识的潜在问题。

在构建交互式用户界面时，我们经常会遇到需要用户通过键盘来导航和选择列表项的场景。特别是在数据结构复杂，例如包含多层级分类的列表时，为所有子项提供一个连续的、统一的序列号，并使其支持键盘事件，是一个常见的需求。本教程将深入探讨如何在React中优雅地解决这一问题，实现一个功能完善的键盘可导航多分类列表。

挑战：多分类列表的统一序列号与键盘导航

假设我们从后端获取的数据结构如下所示，其中包含多个category，每个category下又包含多个predictions：

const items = [{
    "category": "Office",
    "predictions": [
      { "id": "2599", "value": "Printer", "type": "OFF" },
      { "id": "2853", "value": "Camera", "type": "OFF" },
      { "id": "2202", "value": "Keyboard", "type": "OFF" }
    ]
  },
  {
    "category": "Home",
    "predictions": [
      { "id": "2899", "value": "Television", "type": "ELEC" },
      { "id": "2853", "value": "Microwave", "type": "ELEC" },
      { "id": "2732", "value": "Washing Machine", "type": "ELEC" }
    ]
  }
];

登录后复制

我们的目标是让所有predictions项拥有一个从0开始递增的统一序列号（例如：Printer为0，Camera为1，Keyboard为2，Television为3，以此类推），并通过上下箭头键实现高亮选中项的切换。

解决方案：扁平化数据与集中式状态管理

为了实现跨分类的统一序列号管理和键盘导航，关键在于将复杂的嵌套数据结构“扁平化”，将其中的所有可选择项提取到一个单一的数组中。这样，我们就可以在一个统一的数组上管理索引，大大简化了逻辑。

1. 数据扁平化

使用JavaScript的Array.prototype.flatMap()方法可以高效地将多层嵌套数组扁平化为一层。

const allItems = categories.flatMap(category => category.predictions);
// allItems 将是一个包含所有 prediction 对象的单一数组

登录后复制

通过flatMap，我们得到了一个包含所有prediction对象的单一数组。现在，我们可以轻松地在这个数组上使用索引来表示序列号。

2. 避免使用数组索引作为唯一ID

在React中，当列表项的顺序可能发生变化时，直接使用数组索引作为key或唯一标识符通常不是一个好实践，因为它可能导致难以追踪的渲染问题。理想情况下，每个列表项都应该有一个稳定的、唯一的id属性。在我们的数据结构中，每个prediction对象已经包含了id属性，这非常适合作为唯一标识。

3. 集中式状态管理选中项

在React函数组件中，我们可以使用useState钩子来管理当前选中的项。我们将存储的是扁平化数组中的selectedIndex，即当前高亮项在allItems数组中的索引。

import React, { useState } from 'react';

const CategoriesComponent = ({ categories }) => {
    const allItems = categories.flatMap(category => category.predictions);
    const [selectedIndex, setSelectedIndex] = useState(0); // 初始选中第一项
    const selectedItem = allItems[selectedIndex]; // 获取当前选中的具体项

    // ... 其他逻辑
};

登录后复制

4. 组件结构与属性传递

为了保持代码的清晰和可维护性，我们将列表渲染拆分为几个独立的组件：

乾坤圈新媒体矩阵管家

新媒体账号、门店矩阵智能管理系统

查看详情

CategoriesComponent: 渲染所有分类的容器组件。
CategoryComponent: 渲染单个分类及其下的所有预测项。
PredictionComponent: 渲染单个预测项，并根据是否选中添加高亮样式。

CategoriesComponent是管理selectedIndex的父组件。它需要将当前选中的项的id传递给子组件，以便子组件能够判断自己是否应该被高亮。

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

    // ... onKeyUp 事件处理

    return (
        <div onKeyUp={onKeyUp} tabIndex={-1}> {/* tabIndex={-1} 使 div 可聚焦 */}
            {categories.map((category) => (
                <CategoryComponent
                    key={category.id} // 使用 category 的 id 作为 key
                    name={category.name}
                    predictions={category.predictions}
                    selectedId={selectedItem.id} // 传递当前选中项的ID
                />
            ))}
        </div>
    );
};

// CategoryComponent.js
const CategoryComponent = ({ name, predictions, selectedId }) => {
    return (
        <div>
            <h3>{name}</h3>
            <ul role="listbox">
                {predictions.map((prediction) => (
                    <PredictionComponent
                        key={prediction.id} // 使用 prediction 的 id 作为 key
                        id={prediction.id}
                        name={prediction.value} // 根据数据结构调整为 value
                        selectedId={selectedId} // 继续传递 selectedId
                    />
                ))}
            </ul>
        </div>
    );
};

// PredictionComponent.js
const PredictionComponent = ({ id, name, selectedId }) => {
    const isSelected = id === selectedId; // 判断当前项是否被选中
    return <li className={isSelected ? "highlight" : ""}>{name}</li>;
};

登录后复制

5. 实现键盘导航事件

为了响应用户的键盘输入，我们需要在最外层的可聚焦元素上（通常是CategoriesComponent的根div）添加onKeyUp事件监听器。

注意事项：

为了让div元素能够接收键盘事件，需要为其设置tabIndex="-1"。tabIndex="-1"表示该元素可以通过编程方式聚焦，但不能通过Tab键导航聚焦。
在更新selectedIndex时，务必进行边界检查，防止索引超出allItems数组的范围。

const CategoriesComponent = ({ 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)); // 确保不小于0
                break;
            case "ArrowDown": // 向下箭头键
                setSelectedIndex(
                    Math.min(allItems.length - 1, selectedIndex + 1) // 确保不大于最大索引
                );
                break;
            default:
                break;
        }
    };

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

登录后复制

完整示例代码

下面是一个包含所有组件和逻辑的完整React应用示例。为了方便演示，我们使用了一个简化的数据结构，但核心原理与原始问题中的数据结构完全一致。

import React, { useState } from 'react';
import ReactDOM from 'react-dom/client';

// 示例数据
const officePredictions = [
    { id: "2599", value: "Printer", type: "OFF" },
    { id: "2853", value: "Camera", type: "OFF" },
    { id: "2202", value: "Keyboard", type: "OFF" },
];

const homePredictions = [
    { id: "2899", value: "Television", type: "ELEC" },
    { id: "2853", value: "Microwave", type: "ELEC" },
    { id: "2732", value: "Washing Machine", type: "ELEC" },
];

const categoriesData = [
    { id: "cat-office", name: "Office", predictions: officePredictions },
    { id: "cat-home", name: "Home", predictions: homePredictions },
];

// PredictionComponent: 渲染单个预测项
const PredictionComponent = ({ id, name, selectedId }) => {
    const isSelected = id === selectedId;
    return <li className={isSelected ? "highlight" : ""}>{name}</li>;
};

// CategoryComponent: 渲染单个分类及其下的预测项列表
const CategoryComponent = ({ name, predictions, selectedId }) => {
    return (
        <div>
            <h3>{name}</h3>
            <ul role="listbox">
                {predictions.map((prediction) => (
                    <PredictionComponent
                        key={prediction.id}
                        id={prediction.id}
                        name={prediction.value}
                        selectedId={selectedId}
                    />
                ))}
            </ul>
        </div>
    );
};

// CategoriesComponent: 渲染所有分类的容器，并处理键盘导航逻辑
const CategoriesComponent = ({ categories }) => {
    // 扁平化所有预测项，以便统一管理索引
    const allItems = categories.flatMap((category) => category.predictions);
    const [selectedIndex, setSelectedIndex] = useState(0); // 初始选中第一项
    const selectedItem = allItems[selectedIndex]; // 获取当前选中的具体项

    // 键盘事件处理函数
    const handleKeyUp = (event) => {
        switch (event.code) {
            case "ArrowUp": // 向上箭头
                setSelectedIndex(Math.max(0, selectedIndex - 1)); // 边界检查：不小于0
                break;
            case "ArrowDown": // 向下箭头
                setSelectedIndex(
                    Math.min(allItems.length - 1, selectedIndex + 1) // 边界检查：不大于最大索引
                );
                break;
            default:
                break;
        }
    };

    return (
        // tabIndex={-1} 允许 div 元素通过编程方式获得焦点，从而响应键盘事件
        <div onKeyUp={handleKeyUp} tabIndex={-1} style={{ outline: 'none' }}>
            <h2>商品列表</h2>
            {categories.map((category) => (
                <CategoryComponent
                    key={category.id}
                    name={category.name}
                    predictions={category.predictions}
                    selectedId={selectedItem.id} // 传递当前选中项的ID
                />
            ))}
        </div>
    );
};

// App 组件作为应用的根组件
const App = () => {
    return <CategoriesComponent categories={categoriesData} />;
};

// 渲染应用到DOM
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);

登录后复制

为了使高亮效果可见，我们需要添加一些CSS样式：

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

登录后复制

最后，确保HTML文件中有一个id="root"的元素用于React应用的挂载：

<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>

登录后复制