如何在React中实现支持方向键导航的HTML表格？

核心逻辑 #

通过状态记录当前选中单元格的行、列索引，监听表格的键盘按下事件，根据方向键更新索引并让对应单元格获取焦点，同时处理边界情况与无障碍特性。

完整实现代码 #

import { useState, useEffect, useRef } from 'react';

const KeyboardNavTable = () => {
  // 示例表格数据
  const tableData = [
    ['单元格1-1', '单元格1-2', '单元格1-3'],
    ['单元格2-1', '单元格2-2', '单元格2-3'],
    ['单元格3-1', '单元格3-2', '单元格3-3'],
  ];

  // 记录当前选中单元格的坐标
  const [activeCell, setActiveCell] = useState({ row: 0, col: 0 });
  const tableRef = useRef(null);

  useEffect(() => {
    const handleKeyDown = (e) => {
      const { row, col } = activeCell;
      const maxRow = tableData.length - 1;
      const maxCol = tableData[0].length - 1;

      switch (e.key) {
        case 'ArrowUp':
          e.preventDefault();
          row > 0 && setActiveCell({ row: row - 1, col });
          break;
        case 'ArrowDown':
          e.preventDefault();
          row < maxRow && setActiveCell({ row: row + 1, col });
          break;
        case 'ArrowLeft':
          e.preventDefault();
          col > 0 && setActiveCell({ row, col: col - 1 });
          break;
        case 'ArrowRight':
          e.preventDefault();
          col < maxCol && setActiveCell({ row, col: col + 1 });
          break;
        default:
          break;
      }
    };

    const tableElement = tableRef.current;
    tableElement?.addEventListener('keydown', handleKeyDown);
    // 初始加载聚焦第一个单元格
    focusActiveCell();

    return () => tableElement?.removeEventListener('keydown', handleKeyDown);
  }, [activeCell, tableData]);

  const focusActiveCell = () => {
    const targetCell = tableRef.current?.querySelector(`[data-row="${activeCell.row}"][data-col="${activeCell.col}"]`);
    targetCell?.focus();
  };

  return (
    <table ref={tableRef} aria-label="支持键盘导航的数据表格">
      <tbody>
        {tableData.map((row, rowIndex) => (
          <tr key={rowIndex}>
            {row.map((cellContent, colIndex) => (
              <td
                key={`cell-${rowIndex}-${colIndex}`}
                data-row={rowIndex}
                data-col={colIndex}
                tabIndex={0}
                style={{
                  padding: '8px 12px',
                  border: '1px solid #ddd',
                  outline: activeCell.row === rowIndex && activeCell.col === colIndex ? '2px solid #2196f3' : 'none',
                  cursor: 'pointer',
                }}
              >
                {cellContent}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
};

export default KeyboardNavTable;

关键细节说明 #

• 状态与事件绑定：用activeCell跟踪选中位置，在表格元素上绑定键盘事件，避免全局事件污染
• 边界控制：判断当前行/列是否到达表格边缘，防止索引越界
• 焦点同步：每次更新选中状态后，通过focusActiveCell方法让对应单元格获取焦点
• 无障碍优化：
  • 添加aria-label明确表格用途，适配屏幕阅读器
  • 单元格设置tabIndex={0}，确保可被键盘聚焦
  • 用outline高亮当前选中单元格，提供清晰的视觉反馈

可选扩展 #

• 支持Home/End键快速跳转至当前行首尾单元格
• 支持PageUp/PageDown键批量切换行
• 兼容动态表格数据，实时更新最大行/列数
• 单独处理表头的导航逻辑，实现表头与内容区的联动

内容的提问来源于stack exchange，提问作者Rahul Kumar