React中未直接使用target.value时输入框光标位置丢失问题

问题根源 #

target.value就是普通字符串，不存在特殊处理。当你直接将target.value同步到state时，输入框的原生值和React state完全一致，浏览器会按照正常输入流程自动保留光标位置。但当你修改target.value再更新state时，相当于强制替换了输入框的整个内容，浏览器无法识别这是基于原有输入的修改，会默认将光标移到内容末尾。

最优解决方案 #

通过输入框ref手动记录并恢复光标位置，确保处理文本后光标停留在正确位置。

步骤1：创建输入框Ref #

const inputRef = useRef(null);

步骤2：在onChange中处理文本并维护光标 #

<Input
  ref={inputRef}
  type="text"
  placeholder="Kelime"
  onChange={(e) => {
    const input = inputRef.current;
    if (!input) return;

    // 记录当前光标起始位置（兼容选中内容替换的场景）
    const cursorPos = input.selectionStart;
    const originalValue = e.target.value;
    
    // 示例：在输入字符后追加"3"，按光标位置插入
    const processedValue = 
      originalValue.slice(0, cursorPos) + 
      (originalValue[cursorPos] || "") + 
      "3" + 
      originalValue.slice(cursorPos + 1);

    // 更新状态
    hususlar.kelimeTebdiliHalinde(processedValue);

    // 等待React更新输入框值后，恢复光标位置（+2是因为新增了输入字符和"3"两个内容）
    requestAnimationFrame(() => {
      input.selectionStart = input.selectionEnd = cursorPos + 2;
    });
  }}
  value={hususlar.kelime}
/>

备选：用onKeyDown直接拦截按键 #

如果需要更精准的按键控制，可直接在onKeyDown中处理，避免onChange的二次触发：

<Input
  ref={inputRef}
  type="text"
  placeholder="Kelime"
  onKeyDown={(e) => {
    // 仅处理可打印的普通字符，排除快捷键、删除键等
    if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
      e.preventDefault();
      const input = inputRef.current;
      if (!input) return;

      const cursorPos = input.selectionStart;
      // 拼接处理后的文本
      const newValue = 
        input.value.slice(0, cursorPos) + 
        e.key + 
        "3" + 
        input.value.slice(cursorPos);

      hususlar.kelimeTebdiliHalinde(newValue);

      // 恢复光标位置
      requestAnimationFrame(() => {
        input.selectionStart = input.selectionEnd = cursorPos + 2;
      });
    }
  }}
  value={hususlar.kelime}
/>

关键说明 #

• 使用requestAnimationFrame是为了确保React完成输入框值的更新后，再调整光标位置，避免React重渲染覆盖光标设置。
• 若涉及删除、选中替换等复杂场景，需要额外处理光标位置的计算逻辑，比如删除时光标位置需相应前移。

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