React中编程修改输入框内容时如何处理undo/redo撤销重做功能

问题根因 #

通过React受控组件直接覆写输入框value时，浏览器会判定该操作不属于用户主动输入行为，不会将其推入原生输入撤销/重做栈，因此无法通过快捷键触发撤销。

方案1：原生能力适配（覆盖你提到的所有测试浏览器版本） #

利用标准输入事件和原生DOM方法操作输入内容，让浏览器将变更识别为用户输入，自动计入撤销栈。

适用场景1：输入时即时转换（如自动大写） #

不要在onChange回调中修改值再回设，改为监听beforeinput事件拦截输入内容，转换后用原生方法插入：

import { useRef } from 'react';

const UpperCaseInput = () => {
  const inputRef = useRef(null);

  const handleBeforeInput = (e) => {
    e.preventDefault();
    // 转换输入内容为大写
    const upperText = e.data?.toUpperCase() || '';
    // 原生插入方法，自动计入撤销栈
    inputRef.current.insertText(upperText);
  };

  return (
    <input
      ref={inputRef}
      onBeforeInput={handleBeforeInput}
      placeholder="自动大写且支持原生撤销"
    />
  );
};

适用场景2：选择器插入内容到光标位置 #

插入操作必须放在用户交互回调（如选择器点击事件）中，使用setRangeText方法插入内容：

const insertTextAtCursor = (insertContent) => {
  const input = inputRef.current;
  const startPos = input.selectionStart;
  // 原生方法替换光标选中区域内容
  input.setRangeText(insertContent);
  // 调整光标到插入内容末尾
  input.selectionStart = input.selectionEnd = startPos + insertContent.length;
  // 触发input事件同步React状态
  input.dispatchEvent(new Event('input'));
};

该方案在Chrome 90+、Firefox 87+、Safari 14.1+、Edge 90+版本均可以正常触发原生撤销/重做逻辑。

方案2：自定义历史栈（全场景兜底兼容） #

如果需要兼容旧版本浏览器，或者有更复杂的编辑逻辑，可以自行实现撤销/重做管理，完全不依赖浏览器原生能力：

import { useState, useRef } from 'react';

const CustomHistoryInput = () => {
  const [value, setValue] = useState('');
  // 历史栈存储每次变更的内容和光标位置
  const historyRef = useRef([{ value: '', cursor: 0 }]);
  // 当前历史指针
  const historyIndexRef = useRef(0);

  const handleInput = (e) => {
    const newValue = e.target.value;
    const cursor = e.target.selectionStart;
    // 截断指针后无效历史
    historyRef.current = historyRef.current.slice(0, historyIndexRef.current + 1);
    // 推入新的历史节点
    historyRef.current.push({ value: newValue, cursor });
    historyIndexRef.current += 1;
    setValue(newValue);
  };

  const handleKeydown = (e) => {
    const isMac = navigator.userAgent.includes('Mac');
    const ctrlKey = isMac ? e.metaKey : e.ctrlKey;
    // 拦截撤销操作
    if (ctrlKey && e.key === 'z' && !e.shiftKey) {
      e.preventDefault();
      if (historyIndexRef.current > 0) {
        historyIndexRef.current -= 1;
        const { value: prevVal, cursor } = historyRef.current[historyIndexRef.current];
        setValue(prevVal);
        // 恢复光标位置
        requestAnimationFrame(() => {
          e.target.selectionStart = e.target.selectionEnd = cursor;
        });
      }
    }
    // 拦截重做操作
    if (ctrlKey && e.key === 'z' && e.shiftKey) {
      e.preventDefault();
      if (historyIndexRef.current < historyRef.current.length - 1) {
        historyIndexRef.current += 1;
        const { value: nextVal, cursor } = historyRef.current[historyIndexRef.current];
        setValue(nextVal);
        requestAnimationFrame(() => {
          e.target.selectionStart = e.target.selectionEnd = cursor;
        });
      }
    }
  };

  return (
    <input
      value={value}
      onInput={handleInput}
      onKeyDown={handleKeydown}
      placeholder="自定义历史栈输入框"
    />
  );
};

该方案所有行为完全可控，兼容所有支持React的浏览器版本。

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