Is onChange a special attribute?

Frequently Asked Questions React.js FAQ
1

Question

Is onChange a special attribute?

Answer

We encounter the attribute onChange in this lesson, there we use it to call the method handleChange.
onChange is a special attribute in React. It is actually called syntheticEvent wrapper, it uses the browser’s native event which tracks the changes in a form or input element. Other syntheticEvents of forms are: onInput onInvalid onSubmit

Their main behavior is to track the event, back to our onChange event, it tracks every change that happens in the browser to the element with the onChange attribute. At each change it will create an event object, in our case we are concern about the value in the element, so exploring that event object we can see that under a target property we will the that there is an object with a property value which holds how the element’s value looks like at the moment the event object was created. As a comparison, through vanilla JavaScript and HTML, we would have to load a script on the page that will target an element and every time the element changed it will trigger a function which then targeting the element again we could grab its value property. Here is the visual example of that difference:
HTML:

<!DOCTYPE html>
<html>
<body>

<p>Select a day.</p>

<select id="mySelect" onchange="myFunction()">
  <option value="Monday">Monday
  <option value="Tuesday">Tuesday
  <option value="Wednesday">Wednesday
  <option value="Thursday">Thursday
  <option value="Friday">Friday
</select>


<script type="text/javascript" src="./index.js"></script>

</body>
</html>

And the JavaScript file index.js:

function myFunction() {
    var x = document.getElementById("mySelect").value;
    console.log( "You selected: " + x);
}

This is how it will look in React jsx:

import React from 'react';

export class DayDropDown extends React.Component {
  constructor(props) {
    super(props);
    
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e){//e is a parameter, so when having the method passed
  //to the syntheticEvent attribute it will receive the event object
  //and is captured as e
    console.log( "You selected: " + e.target.value);
  }

  render(){
    return(
      <select id="mySelect" onChange={this.handleChange}>
        <option value="Monday"> Monday </option>
        <option value="Tuesday">Tuesday </option>
        <option value="Wednesday">Wednesday </option>
        <option value="Thursday">Thursday </option>
        <option value="Friday">Friday </option>
      </select>
    );
  }
}

export default DayDropDown;

As we could see both situations developed very alike, although in React we used one file and we access an object created by our special attribute onChange, and with HTML and JavaScript we have to pass the function in the event handling attribute, and also target the element we want to extract the value from, which is already provided in React, we just need to capture it through a parameter in the method we will use, and we can target the event object to use the value.

6 Likes
2

In the HTML/JS example, since we’re giving the select element an onclick attribute, wouldn’t it create an event listener for which we could define an event handler function (myFunction) that receives an event object argument just like in the React example? Would this allow us to skip using document.getElementById() to make the change and just use e.target.value instead?

function myFunction(e) {
    console.log( "You selected: " + e.target.value);
}
3

This is a good idea, and I think this is possible. but I am having issue with syntax (I guess). I tried:

<!DOCTYPE html>
<html>
<body>
<p>Select a day.</p>
<select id="mySelect" onchange="myFunction('mySelect')">
  <option value="Monday">Monday
  <option value="Tuesday">Tuesday
  <option value="Wednesday">Wednesday
  <option value="Thursday">Thursday
  <option value="Friday">Friday
</select>

<script type="text/javascript">
function myFunction(e) {
    console.log( "You selected: " + e.target.value);
}
</script>
</body>
</html>

Hiow can I improve this line:

<select id="mySelect" onchange="myFunction('mySelect')">

although, at then end, I think this is not possible to pass an argument to myFunction() by using “pure” HTML like this.