Divi React II – Handling Events in React Workflow

Hi everyone, last week we talked about React States and how to manage them when developing our custom Divi module. Today we move forward talking about another important step in React: handling events!

So, let’s get started.

HANDLING EVENTS IN REACT: THE BASICS

Handling event is an important step in Javascript and not only. Essentially you can listen for an event and call a callback function when this event is fired; it’s the usual behaviour you can see in Js and jQuery when you click on a button and something happens (a popup appears, a form is submitted, an element is revealed, a color changes and so on).

In React you can set Event listeners almost like you do in Html or in Js usually, just by adding a property to your html elements before the self-closing tag; however, you have to note a little syntax difference: while in common Js you will use the simple ‘onclick, onchange, onfocus etc.’ in React you have to type the camelcase version ‘onClick, onChange, onFocus etc.’!

Once you have set up an event listener you will have to write the callback function your html element is listening for and pass it to the Event Listener itself. In order to write this function and handling the event you have more than one way, but for now let’s stick to the ReactJs documentation.

So, we have simply to write our function and then call it between curly braces in a way that looks like: ‘onClick={this.myFunction}’:

Finally, in order to make your application properly running you will have to bind your function in the Constructor:

This step is required because you can’t use the keyword ‘this’ in your function unless you bind it in your constructor as we have seen above.

HANDLING EVENTS IN REACT: BINDING EVENTS

Talking about binding events, however, we have more than one way to do it and, accordingly, as we said before, we have more than one way to handle events.

We have already seen the safer and older method you can find in the React documentation: write a function using ‘this’ inside of it, then bind it in the Constructor and call it in the Event Listener as ‘this.myFunction’.

If you don’t like to declare a Constructor you have a couple of alternatives, the first one definitely deprecated, the other definitely recommended.

BINDING EVENTS AS PROPERTY (deprecated)

You can simply use the .bind() method right inside render() between the curly braces, something like this:

However doing so your code will lose in readability and above all every time a component in your render() method will change also your handling event element will be re-rendered with a lost of performance if your render() method is particularly complex.

BINDING EVENTS WITH ES6 ARROW FUNCTIONS (recommended)

Thanks to ES6, however, we also have a third way that is maybe the better one. We can use Arrow Functions instead of using standard ones and without having to declare a Constructor or bind nothing because the arrow functions can access the ‘this’ keyword.

HANDLING EVENT IN REACT: A REAL EXAMPLE

Let’s conclude with a real React handling event example. Let’s say we have an <h1> title and an <input> text below; when we type a name in the input it will replace our name in the title. Simple but clean. Let’s start with our React component:

Now we can write our function that handle the input we type and pass this function to our event listener ‘onChange’.

Finally we finish our React component setting the state in our constructor and changing it in our callback function:

If you are wondering how could be our React component if we use the ES6 Arrow Function method here you find the answer:

IN THE NEXT FRIDAY POST

Next Friday we will see handling event in action in our Divi custom module development workflow adding an event to our purple Circle that will allow us to change background color directly.

So, stay tuned! See you next post.