React形式onSubmit事件对象在devtools上缺少值

Question

我有一个反应形式：

<form onSubmit={this.handleSubmit}>

handleSubmit函数是：

  handleSubmit = (values) => {
    console.log(values);
    console.log(values.target[0].value);
    values.preventDefault();
  }

values.target[0].value输出正确的输入值。但是，在chrome devtools中我没有看到它。我改为[[Target]]。

[[]]是什么意思，target[0].value在哪里？

Answer 1

React使用名为SyntheticEvent的东西，它是原始浏览器事件的代理。这样做可以使您的代码在不同浏览器中表现一致。

From React docs:

  

您的事件处理程序将传递SyntheticEvent的实例，a   围绕浏览器的本机事件的跨浏览器包装器。它有   与浏览器的本机事件相同的界面，包括   stopPropagation（）和preventDefault（），但事件工作除外   所有浏览器都相同。

所以在你的代码中你传递了SyntheticEvent：

handleSubmit = (syntheticEvent) => {
  console.log(syntheticEvent);
  console.log(syntheticEvent.target[0].value);
  syntheticEvent.preventDefault();
}