Event Handling and Management in React

Although handling events with React Elements is much like handling events on DOM elements, there are unique differences with React’s approach to altering the user interface (UI). React has a special wrapper called SyntheticEvent that forms part of its Event System. It promotes cross-browser compatibility and makes it easier on both developers and users by reducing inconsistencies across various browsers. The familiar stopPropagation() and preventDefault() methods seen in JavaScript remain relevant in React’s event system. Event handlers in React are attached to elements with a similar syntax observed in adding and passing down props through React components. The way to write a handler is to use on as the prefix and camelCase it with the event name suffix as demonstrated below with the onFocus event handler:

kevinptx/react-event-system-lab-online-web-sp-000

Notice in the code above we have the prop called onFocus on line 11 that is passed a function reference rather than executing the onFocus function. Unlike with vanilla JavaScript and HTML, which passes event handlers as strings, you pass a function as the event handler with React’s JSX syntax.

Below is how the event would be handled on DOM elements:

<button onfocus="onFocus()">
  On Focus
</button>

The React way:

<button onFocus={onFocus}>
  on Focus
</button>

We are not writing onFocus(). The () at the end of the function would invoke it. Of special significance is that we are binding our onFocus() and onBlur() methods to this using an arrow function to avoid creating a new scope. This binding can also be accomplished using the ES5 approach as seen below, but I prefer using the updated ES6 binding method with arrow functions, which take care of the binding for you. As shown above, the similarity in syntax between passing JSX attributes as a props object and referencing an event handler is obvious.

Below is the more antiquated ES5 approach to binding this:

this.onFocus = this.onFocus.bind(this); 
this.onBlur = this.onBlur.bind(this);

The binding is necessary to make this work in the callback. It is a general rule that if you refer to a method without () after it, such as onFocus={this.onFocus}, you should bind that method, either by using arrow functions (preferred) or by using the older ES5 technique of .bind(this) .

There is a complete list of supported events in the React documents, but some of the more common ones include: onKeyUp, onMouseDown, onFocus, andonSubmit

In React, SyntheticEvent allows us to to take advantage of something called event pooling, which is a technique to improve our app’s performance. Event pooling means that whenever an event fires, its event data, which is the form of an object, is sent to the callback. The object is then immediately cleaned up for later use.

Read more here on event pooling: https://learn.co/tracks/full-stack-web-development-v7/react/events/events-in-detail

Updating State in React

The purpose of having an event is usually to update state. We do not directly modify the state using this.state but instead, use this.setState() , which allows React to know that there has been an update in the component state in order to cause a re-render. An object is passed into this.setState() and is merged with the current state. Once state is updated, a re-render is triggered on the component. In order to deeply merge the current state with the object passed into this.setState() , we can use the spread operator to ‘decompose’ the object. (Note: the spread operator can also be used on arrays.) The spread operator is the updated ES6 approach to decompose the object vs the older ES5 method of using Object.assign({}, obj). I will demonstrate this in an example below:

What’s happening in the above code?

...this.state.addressInfo returns all the keys and values from within the addressInfo object. By using the JavaScript spread syntax, we are maintaining all of the keys and values that make up the addressInfo object from the top level key of street to the last key of country , along with all of the associated values of those keys. In addition, we are adding the city key with the new value Houston . If there already happens to be a city key inside addressInfo, it will be overwritten with the new one we are providing, which in our case is Houston, and if it did not exist, then it will be added.

See more: https://learn.co/tracks/full-stack-web-development-v7/react/events/updating-state

Differences between State Changes and Prop Changes

There are key differences between changes in state and changes in props. Changes in both similarly trigger a re-render of the React component as a change signifies an update in the UI (user interface). Components can change their own internal state, so changes can only happen internally. While a component can change its own state, it cannot change its own props. Prop changes are external rather than internal and happen when the grandparent or parent component changes the values to then pass down to their children components. I will cover this in greater detail in a subsequent blog post.