React搜索输入框：如何识别粘贴触发的文本变更并保留Undo功能？

问题场景 #

实现React搜索输入框，需求如下：

• 用户输入文本时触发搜索操作
• 用户粘贴文本时，搜索完成后需执行额外操作

当前代码存在矛盾点：

• 在onPaste事件中阻止默认行为，能准确识别粘贴操作，但会导致输入框的Undo（Ctrl+Z）功能失效
• 若添加document.execCommand('insertText')恢复Undo功能，又无法区分文本变更是由粘贴还是手动输入触发

现有代码示例 #

function App() {
  const [isPaste, setIsPaste] = useState(false);
  const [searchText, setSearchText] = useState('');

  useEffect(() => {
    callSearchApi(searchText).then(() => {
      if (isPaste) {
        doSomeExtraWork();
      }
    });
  }, [searchText, isPaste]);

  return (
    <div>
      <input
        value={searchText}
        onChange={(e) => {
          setIsPaste(false);
          setSearchText(e.target.value);
        }}
        onPaste={(e) => {
          e.preventDefault();
          setIsPaste(true);
          const pasteText = (e.clipboardData || window.clipboardData)
            .getData('text')
            .trim();
          setSearchText(pasteText);
          // document.execCommand('insertText', false, pasteText); // this will trigger a `change` event
        }}
      />
    </div>
  );
}

2023年6月8日更新 #

根据MDN文档说明（翻译）：

值得注意的是，剪贴板 API 并不能替代 insertText 命令——你可以使用该命令在纯文本区域和输入框中以编程方式替换光标处的文本，同时保留撤销缓冲区（编辑历史）。

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