在 devtools 上反应表单 onSubmit 事件对象缺失值

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 的实例，一个 围绕浏览器的本机事件的跨浏览器包装器。它有 与浏览器的原生事件相同的界面，包括 stopPropagation() 和 preventDefault()，除了事件有效 在所有浏览器中都相同。

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

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