2

I have a form in react:

<form onSubmit={this.handleSubmit}>

And the handleSubmit function is:

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

values.target[0].value prints the correct value of the input. However, in chrome devtools I don't see it. I see instead [[Target]].

What does the [[]] mean, and where is the target[0].value?

enter image description here

Ross Allen
  • 43,772
  • 14
  • 97
  • 95
Poogy
  • 2,597
  • 7
  • 20
  • 35
  • The origin of the stuff inside `[[ ]]` is explained in this answer: https://stackoverflow.com/a/28917161/368697 – Ross Allen Mar 25 '18 at 12:29

1 Answers1

4

React uses something called SyntheticEvent which is a Proxy to original browser event. It does that to make your code behave consistently across browsers.

From React docs:

Your event handlers will be passed instances of SyntheticEvent, a cross-browser wrapper around the browser’s native event. It has the same interface as the browser’s native event, including stopPropagation() and preventDefault(), except the events work identically across all browsers.

So in your code you are passed SyntheticEvent:

handleSubmit = (syntheticEvent) => {
  console.log(syntheticEvent);
  console.log(syntheticEvent.target[0].value);
  syntheticEvent.preventDefault();
}
Tomasz Mularczyk
  • 34,501
  • 19
  • 112
  • 166