React中通过dispatchEvent触发textarea的onChange无效问题

核心原因 #

React的合成事件系统会忽略非可信事件（即isTrusted属性为false的事件）。你通过new InputEvent手动创建并派发的事件，isTrusted默认是false，因此无法被React的onChange捕获。

补充说明：React的<textarea>组件onChange实际上对应原生的input事件（而非原生change事件），但这不是本次事件未被捕获的核心原因——即使你派发input事件，只要是非可信事件，React依然会过滤。

解决方案 #

方案一（推荐，符合React数据流）

直接调用handleTextAreaChange处理函数，传入模拟的事件对象即可。如果需要更新输入框内容，直接修改对应的state即可，这是React受控组件的标准用法：

// 模拟符合处理函数需求的事件对象
const mockEvent = {
  target: { value: content }, // 可替换为你需要的新值
  preventDefault: () => {},
  stopPropagation: () => {}
};

// 直接调用处理函数
handleTextAreaChange(mockEvent);

// 若需更新输入框内容，同步修改state
// setContent("你的新内容");

方案二（DOM事件触发，不推荐）

如果必须通过DOM事件触发，可先修改textarea的DOM值再派发事件，但由于是受控组件，React会立刻将DOM值重置为state中的content，且事件仍属于非可信事件，大概率无法触发React的onChange，仅作参考：

if (textAreaRef.current) {
  // 修改DOM值（会被React立刻覆盖）
  textAreaRef.current.value = "临时内容";
  // 派发原生input事件
  const inputEvent = new InputEvent('input', { bubbles: true, cancelable: true });
  textAreaRef.current.dispatchEvent(inputEvent);
}

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