反应合成事件与本机Javascript事件？

我很难理解合成事件

我调试本机javascript事件的方式如下

window.addEventListener('mousemove',
  function(event){
    console.log(event);
})

如果我移动鼠标并检查控制台，我可以看到事件属性，如

target

，以及其他有用的属性，如

innerHTML

，

nextElementSibling

，

lastChild

等

下面我有一个简单的react应用程序。它是一个带有提交按钮的输入字段。如果提交时在输入中输入了内容，则会弹出警报。否则什么都没有

//反应合成事件
类AddOption扩展了React.Component{
手引线掺杂（e）{
e、 预防默认值（）；
控制台日志（e）；
const option=e.target.elements.option.value；//<如何在调试器中找到它？
如果（选项）{
警报（“输入了某物”）；
}
}
render（）{
返回(
反应提交
)
}
}
ReactDOM.render（，document.getElementById（'app'））
根据li357注释，在原始post中的
console.log（e）
语句的前面添加
e.persist（）
，在调试器中显示这一点。您可以看到本机javascript事件的属性包括
目标
、
元素
和react中定义的
选项

您可以使用
e.nativeEvent
访问本机事件，并从那里访问
元素。选项。值
属性：

// React Synthetic Events
class AddOption extends React.Component {
    handleAddOption(e){
      e.preventDefault();
      console.log(e);

      const option = e.target.elements.option.value; // < HOW WOULD I FIND THIS IN THE DEBUGGER?
      // > YOU CAN USE e.nativeEvent TO GET ACCESS TO THE NATIVE EVENT:
      console.log(e.nativeEvent);
      console.log(e.nativeEvent.target.elements.option.value); // < HERE IS YOUR VALUE

      if (option){
        alert("something was entered in");
      }
    }
    render() {
      return (
        <div>
          <form onSubmit={this.handleAddOption}>
            <input type="text" name="option" defaultValue={"Toy"}/>
            <button>React Submit</button>
          </form>
        </div>
      )
    }
}
ReactDOM.render(<AddOption />, document.getElementById('root'));

//反应合成事件
类AddOption扩展了React.Component{
手引线掺杂（e）{
e、 预防默认值（）；
控制台日志（e）；
const option=e.target.elements.option.value；//<如何在调试器中找到它？
//>您可以使用e.nativeEvent访问本机事件：
控制台日志（例如nativeEvent）；
console.log（e.nativeEvent.target.elements.option.value）；//<这是您的值
如果（选项）{
警报（“输入了某物”）；
}
}
render（）{
返回(
反应提交
)
}
}
ReactDOM.render（，document.getElementById（'root'））；
我猜您正在尝试访问已发布的事件。尝试调用
e.persist（）
，以保留事件，以便可以在DevToolsit worked:）中查看其属性。相对于虚拟dom，它到底做了什么？如果你给出一个答案，我将投票并将其标记为解决方案，这是出于性能原因。只有一个
SyntheticEvent
，因为它是池式的并被重用的（这就是为什么当您在DevTools中登录它，然后尝试异步查看它的属性时，会得到null）。vueJS是否也使用
syntheticEvents
？是否有一个简单的js代码段/库演示合成事件是如何生成的？您可以浏览React源代码。据我所知，它只是W3C实际事件规范的一个包装，带有一些额外的性能功能。