React中onKeyDown切换表格选中行时自动滚动失效问题

核心问题是DOM焦点未跟随选中状态同步更新：

• 你为每一行设置了tabIndex={0}并绑定onKeyDown事件，只有当前持有焦点的行才会响应键盘操作，event.target永远指向实际持有焦点的DOM元素，和React层维护的selected状态没有任何绑定关系
• 你调用setSelected仅更新了React层面的选中样式状态，并没有主动将焦点移动到新选中的行上，因此焦点会一直停留在你最初点击的那一行，后续所有键盘事件的target自然不会变化
• 用useCallback包裹事件处理函数无法解决该问题，因为问题本质和重渲染导致的函数引用变化无关，属于交互逻辑缺失。

核心逻辑是让DOM焦点、滚动位置始终和selected状态保持同步，不要依赖event.target作为滚动目标，具体修改步骤如下：

• 建立行ID与DOM节点的映射关系，方便随时获取选中行的DOM元素

// 存储每个行id对应的TableRow DOM节点
const rowRefs = useRef(new Map());

• 修改TableRow渲染逻辑，绑定ref，同时调整tabIndex规则，仅让选中行可被聚焦

<TableRow
  key={row.id}
  sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
  selected={isRowSelected(row.id)}
  onClick={() => handleSetSelected(row.id)}
  onKeyDown={handleKeyDown}
  tabIndex={isRowSelected(row.id) ? 0 : -1}
  ref={(node) => {
    if (node) rowRefs.current.set(row.id, node);
    else rowRefs.current.delete(row.id);
  }}
>

• 新增状态监听，每次选中行变化时，自动同步焦点到新行、触发滚动，移除原键盘事件中基于event.target的滚动逻辑

// 监听选中项变化，同步焦点和滚动位置
useEffect(() => {
  const activeRow = rowRefs.current.get(selected);
  if (activeRow) {
    activeRow.focus();
    activeRow.scrollIntoView({ behavior: "smooth", block: "center" });
  }
}, [selected]);

const handleKeyDown = (event) => {
  event.preventDefault();
  if (event.key === "ArrowUp") {
    if (selected === rows[0].id) return;
    setSelected(getNextRow(rows, selected, "up"));
  }
  if (event.key === "ArrowDown") {
    if (selected === rows[rows.length - 1].id) return;
    setSelected(getNextRow(rows, selected, "down"));
  }
};

• 焦点和选中状态强绑定后，后续键盘事件会始终在当前选中行上触发，不会再出现event.target停留在旧行的问题
• 滚动逻辑与触发源（点击/键盘）解耦，任何场景下选中行变化都会自动滚动到可视区域，无需重复编写滚动代码
• 非选中行设置tabIndex=-1后，用户按Tab键不会意外跳转到未选中的行，交互逻辑更符合预期

内容的提问来源于stack exchange，提问作者Stephan Bakkelund Valois