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

Question

我很难理解合成事件的反应。

我用本地javascript事件调试的方式是这样的

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

如果我移动鼠标并检查控制台，则可以看到事件属性，例如target和其他有用的属性，例如innerHTML，nextElementSibling，lastChild等

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

// 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?
    if (option){
      alert("something was entered in");
    }
  }
  render() {
    return (
      <div>
        <form onSubmit={this.handleAddOption}>
          <input type="text" name="option" />
          <button>React Submit</button>
        </form>
      </div>
    )
  }
}
ReactDOM.render(<AddOption />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"><!-- reactapp -->

我没有得到的是，如果我检查页面，它没有像本机事件那样提供有用的信息。

该问题在我的reactapp中被引用（在教程之后）以使用e.target.element.options.value。我不知道有人会在调试器中发现这一点。在合成事件的element下，在任何长时间嵌套的原型属性链中，我都看不到任何被称为target的东西。我试过 CTRL + F ，但我不认为chrome支持搜索嵌套的原型

我不了解虚拟DOM中发生的事情/通常会做出反应吗？

Answer 1

每个li357注释，在原始帖子的e.persist()语句之前添加console.log(e)，以在调试器中显示此内容。您可以看到本地javascript事件的属性包括target，element和来自react的已定义option

Answer 2

您可以使用input$sample来访问本机事件，并从那里访问e.nativeEvent属性：

elements.option.value