React表单中箭头键切换输入框时光标位置异常及keyUp默认行为控制问题

嘿，我来帮你拆解这个问题～

首先，你观察到的光标先跳转到输入字段起始位置再回到预期位置的现象，本质是浏览器默认的键盘事件行为没有被完全拦截导致的：

• 当你按下ArrowUp时，浏览器的默认行为（在输入框内将光标移至内容开头）会在你的自定义逻辑之后触发；
• 你在keyHandler（keydown事件回调）里完成了焦点切换和光标设置，但随后浏览器的默认keyup事件仍然会执行，把新聚焦的输入框光标移到开头；
• 最后你的keyUpHandler又把光标设回之前记录的位置，就出现了肉眼可见的跳动。

为什么需要用useRef存储光标位置？ #

你猜的没错——核心原因就是无法在自定义逻辑执行前完全阻止浏览器的默认keyup行为：

• keydown和keyup是两个独立的事件，你需要在keydown时记录当前光标位置，再在keyup时读取这个值来恢复光标；
• 如果用useState存储，状态更新会触发组件重渲染，不仅没必要，还可能导致光标位置的读取时机出错；
• useRef的current属性是一个可变容器，它不会触发重渲染，能在不同事件回调之间稳定保存和读取光标位置，完美适配这种跨事件的状态传递需求。

优化方案：彻底阻止默认行为，避免光标跳动 #

其实我们可以在keydown事件里就彻底阻止浏览器的默认行为，这样就不需要在keyup里额外恢复光标了，代码会更简洁：

const keyHandler = (e) => {
  e.stopPropagation();
  // 先阻止默认行为，避免浏览器自带的光标移动
  if (["ArrowUp", "ArrowDown"].includes(e.key)) {
    e.preventDefault();
  }

  const eTarget = e.target;
  const [elePosition, parent, children, mum] = getCurElePosition(eTarget);

  if (e.key === "ArrowUp") {
    const previousSiblingIndex = elePosition - 1;
    if (previousSiblingIndex >= 0) {
      const { selectionStart, selectionEnd } = eTarget;
      const previousSibling = children[previousSiblingIndex].children[0].children[0];
      previousSibling.focus();
      previousSibling.setSelectionRange(selectionStart, selectionEnd);
    }
  }
  // 可同理添加ArrowDown的处理逻辑
};

这样修改后，浏览器不会再执行默认的光标移动行为，光标会直接定位到你设置的位置，也就不需要arrowDownPosition这个useRef和keyUpHandler了。

另外，你的getCurElePosition函数里的遍历找索引方式可以优化，用Array.prototype.indexOf直接获取会更高效：

const getCurElePosition = (eTarget) => {
  const mum = eTarget.parentElement.parentElement;
  const parent = mum.parentElement;
  const children = Array.from(parent.children);
  const taskNum = children.indexOf(mum); // 直接获取父元素在children中的索引
  return [taskNum, parent, children, mum];
};

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