React 合成事件與原生 Javascript 事件？

Question

我很難理解反應合成事件。

我用原生 javascript 事件調試的方式是這樣的

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

如果我移動鼠標並檢查控制台，我可以看到事件屬性，例如target和其他有用的屬性，例如innerHTML 、 nextElementSibling 、 lastChild等。

我在下面有一個簡單的反應應用程序。 它是一個帶有提交按鈕的輸入字段。 如果提交時在輸入中輸入了某些內容，則會彈出警報。 否則什么都沒有

 // 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 。 我不知道有人會如何在調試器中發現這一點。 在合成事件的target下的任何原型屬性的長嵌套鏈中，我​​沒有看到對任何配音element的引用。 我試過CTRL+F但我認為 chrome 不支持搜索嵌套原型

我是不是不了解虛擬 DOM 中發生的事情/一般反應？

Answer 1

根據 li357 評論，在原始帖子中的console.log(e)語句之前添加e.persist()在調試器中顯示這一點。 你可以看到原生 javascript 事件的屬性包括target 、 element和 react 中定義的option

Answer 2

您可以使用e.nativeEvent訪問本機事件並從那里訪問elements.option.value屬性：

// 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'));