React应用中onChange事件isTrusted为false的原因咨询

这其实是React的**合成事件（SyntheticEvent）**机制导致的，我来给你拆解清楚背后的逻辑：

• React合成事件的本质：React并没有给每个DOM元素直接绑定原生事件，而是采用了事件委托的策略——它会把所有事件都绑定到根节点（比如document）上。当用户触发真实的DOM事件后，React会创建一个自己封装的合成事件对象，再通过内部的分发机制传递给你定义的回调函数。

• isTrusted标记的由来：浏览器原生的isTrusted属性是用来区分「用户真实交互触发的事件」和「通过脚本调用dispatchEvent等方式触发的事件」的。而React传递给你的合成事件，并不是浏览器原生事件的直接引用——它是React基于原生事件重新构造的对象。Chrome会把这种由框架合成、非用户直接触发传递的事件标记为isTrusted: false。

• 纯HTML环境的差异：在纯HTML里，你直接给DOM元素绑定的是原生事件，事件对象是浏览器在用户操作时直接生成的，完全来自真实交互，所以isTrusted自然是true。

• 获取正确的isTrusted值：如果你确实需要验证事件是否由用户真实触发，可以通过合成事件的nativeEvent属性访问浏览器原生的事件对象，比如：

  const handleChange = (event) => {
    console.log(event.isTrusted); // 输出false（React合成事件）
    console.log(event.nativeEvent.isTrusted); // 输出true（浏览器原生事件）
  };
  
  return <input type="text" onChange={handleChange} />;
  

简单来说，这是React为了实现跨浏览器兼容、统一事件处理逻辑而设计的机制，合成事件是React对原生事件的一层封装，所以才会出现isTrusted标记的差异。

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