本文档旨在提供一个清晰的指南，讲解如何在 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. 组件化方案
将应用拆分为三个核心组件：
-
gories> : 负责渲染类别列表，并管理全局的选中状态。 -
: 负责渲染单个类别及其包含的预测项。 - : 负责渲染单个预测项，并根据是否被选中应用高亮样式。
3. 数据扁平化
为了方便键盘导航，将多层嵌套的类别和预测项数据扁平化为一个一维数组。可以使用 JavaScript 的 flatMap 方法来实现。
const Categories = ({ categories }) => {
const allItems = categories.flatMap(x => x.predictions);
// ...
};4. 状态管理
使用 React 的 useState Hook 来管理当前选中项的索引 selectedIndex。
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.map(x => )} // const Prediction = ({ id, name, selectedId }) => { const isSelected = id === selectedId; return{name} ; };
6. 键盘事件处理
在
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 (
...
);
};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 (
{categories.map((category) => (
-
{predictions.map((prediction) => (
.highlight {
color: red;
font-weight: bold;
}总结
通过以上步骤，可以实现一个支持键盘导航的跨类别预测
列表。关键在于数据的扁平化、状态的管理以及组件间的通信。同时，需要注意避免使用数组索引作为唯一标识符，并进行边界检查，确保应用的稳定性和可靠性。 这个方法可以应用到各种需要键盘交互的列表型组件中，提高用户体验。
