React中如何按cmd+右箭头聚焦表格最后一行？ref指向异常问题求助

根因分析 #

• 单个useRef在循环中重复赋值给所有<tr>元素，最终selRef.current只会指向最后一次渲染的行，无法覆盖所有行的引用
• 原生<tr>标签默认无tabindex属性，不支持focus()方法，直接调用不会生效
• <tbody>下直接嵌套<div>不符合HTML表格规范，会导致DOM结构异常，影响属性与事件的正常生效
• 现有逻辑仅支持固定指向最后一个被赋值的ref，无法实现8行中任选目标行的需求

修复后完整代码 #

import { useRef, useState } from 'react';

const YourComponent = (props) => {
  // 存储所有行的ref数组
  const rowRefs = useRef<(HTMLTableRowElement | null)[]>([]);
  // 跟踪当前聚焦的行索引
  const [currentFocusIndex, setCurrentFocusIndex] = useState<number>(-1);

  const onKeyDown = (e) => {
    // cmd/ctrl + 右箭头：聚焦最后一行
    if ((e.ctrlKey || e.metaKey) && e.key === 'ArrowRight') {
      e.preventDefault();
      const lastIndex = props.value.length - 1;
      setCurrentFocusIndex(lastIndex);
      rowRefs.current[lastIndex]?.focus();
      // 同步触发选中逻辑，和点击行的效果保持一致
      props.onSelect(props.value[lastIndex], 'copy');
      return;
    }

    // 可选扩展：上下箭头切换行，实现不用鼠标任选行
    if (['ArrowUp', 'ArrowDown'].includes(e.key) && currentFocusIndex >= 0) {
      e.preventDefault();
      let newIndex = currentFocusIndex;
      if (e.key === 'ArrowUp') {
        newIndex = Math.max(0, currentFocusIndex - 1);
      } else {
        newIndex = Math.min(props.value.length - 1, currentFocusIndex + 1);
      }
      setCurrentFocusIndex(newIndex);
      rowRefs.current[newIndex]?.focus();
      props.onSelect(props.value[newIndex], 'copy');
    }
  };

  return (
    <tbody>
      {props.value.map((trip, index) => (
        <tr
          onClick={() => {
            setCurrentFocusIndex(index);
            props.onSelect(trip, 'copy');
          }}
          key={`history-row-${index}`}
          // 聚焦时高亮，和点击样式保持一致
          className={currentFocusIndex === index ? styles.focused : ''}
          // 给每个行分配独立的ref，存入数组
          ref={(el) => (rowRefs.current[index] = el)}
          // 使tr支持聚焦能力
          tabIndex={0}
        >
          <td id={`sr-td-shortcut-${index}`}>{index + 1}</td>
          <td id={`sr-td-pick-${index}`}>
            {genFormattedAddress(trip.start)}
          </td>
          <td id={`sr-td-drop-${index}`}>
            {genFormattedAddress(trip.end)}
          </td>
        </tr>
      ))}
    </tbody>
  );
};

关键修改说明 #

• 把单个ref改成ref数组，每个表格行对应数组的一个下标，可精准定位任意一行
• 给<tr>添加tabIndex={0}属性，使其具备聚焦能力，调用focus()方法可正常生效
• 移除了<tbody>下多余的<div>嵌套，符合HTML表格的DOM结构规范
• 新增当前聚焦索引状态，配合上下箭头快捷键即可实现无需鼠标、从8行中任选目标行的需求
• 快捷键触发时同步调用选中逻辑，和点击行的交互效果完全一致

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