React中受控Input组件触发KeyboardEvent无效问题如何解决？

核心问题原因 #

• React绑定的onChange回调对应的是原生input事件，你当前派发的KeyboardEvent（keypress事件）根本无法触发onChange逻辑。
• 手动通过JS创建派发的事件属于非可信事件，浏览器不会执行对应的默认输入行为，也就是不会自动把你传入的key对应的字符写入输入框的value属性，自然也不会触发后续的状态更新。
• 你当前用的受控输入框的value完全绑定state，哪怕浏览器触发了默认输入，你没有在对应的事件回调里更新state，输入框的值也会被React覆盖还原。

正确实现方案 #

如果要模拟用户逐字输入触发onChange的效果，可以按如下方式修改代码，通过逐个派发原生input事件，同时构造符合React事件规范的事件对象触发回调逻辑，全程不会直接修改输入框的value属性：

import { useRef, useState, useEffect } from "react";
import "./styles.css";

export default function App() {
  const [state, setState] = useState("");
  const inputRef = useRef();

  // 模拟逐字输入的工具函数
  const simulateType = (inputEl, text, interval = 100) => {
    let index = 0;
    const totalLength = text.length;
    const typeInterval = setInterval(() => {
      if (index >= totalLength) {
        clearInterval(typeInterval);
        return;
      }
      const newVal = text.slice(0, index + 1);
      // 构造符合React要求的input事件
      const inputEvent = new Event('input', { bubbles: true });
      Object.defineProperty(inputEvent, 'target', {
        writable: false,
        value: { value: newVal }
      });
      // 派发事件触发onChange逻辑
      inputEl.dispatchEvent(inputEvent);
      index++;
    }, interval);
  };

  useEffect(() => {
    // 传入需要自动填充的内容即可
    simulateType(inputRef.current, "test content");
  }, [inputRef]);

  const onChange = (e) => {
    setState(e.target.value);
  };

  return (
    <div className="App">
      <h1>{state}</h1>
      <input
        type="text"
        id="name"
        onChange={onChange}
        ref={inputRef}
        value={state}
      />
    </div>
  );
}

你可以通过调整interval参数修改打字间隔速度，完全模拟真实用户的输入效果。

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