What is event.target.value in React exactly?

user_14073429 0
Viewed 20580

I was able to implement an event handler in my simple React app and I wanted to understand event.target.value more deeply. I have a guess, but I wanted to ask others so I can confirm or modify any false understandings.

So... how are we able to even use event.target.value in React? Does event belong to the Event Web API that I found here? Or is it more of a React thing?

Here is my code for reference

import React from 'react';
import Display from './Display';

export default class Search extends React.Component{
  constructor(props){
    super(props);
    this.state = { userInput: '' };
    this.onSubmit = this.onSubmit.bind(this);
    this.updateInput = this.updateInput.bind(this);
  }

  updateInput(e){
    this.setState({userInput: e.target.value});
  }

  onSubmit(){
    const title = this.state.userInput;
    console.log(title)
  }
  
  render(){
    return(
      <div>
      <label>
        Movie Search App
        <br></br>
        <input type="text" value={this.state.userInput} onChange={this.updateInput}/>
      </label>
      <br></br>
        <input type="submit" value="Search" onClick={this.onSubmit}/>
        <Display />
    </div>
    )
  }
}
reactjs events javascript
1 Answers

event.target gives you the element that triggered the event.

So, event.target.value retrieves the value of that element (an input field, in your example).

In React, events are SynthenticEvent, a 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.

Does event belong to the Event Web API that I found here?

No, it is SynthenticEvent that is a wrapper around the native event.

Is it more of a React thing?

Yes, it has the same interface as the browser's native event but has little different attributes.

How do I access the browser's native Event in a React code?

In most cases, you don't need to. But you can use nativeEvent property of SynthenticEvent i.e. event.nativeEvent.

user_28735380
Related