A Detailed Guide For React Event Handling

In this part, we will learn about event and react event handling. Event handling in React is quite easy and straight forward as HTML events and also if you are familiar with JavaScript, so you will find the event handling in React is pretty easy, let’s understand what is react event handling?.

What are React Event and React Event Handling?

Event is everything, whatever you do with your application or project in browser. For an example,

• click
• double click
• scroll
• moving the mouse
• pressing key
• moving mouse on any element etc.

There are numbers of events, so simply remember whatever you do in browser, obviously after running your project is an event.

Events are pretty straightforward and helps up to make our application more interactive, we can use two types of event handlers in react (1) event listener (2) on-event.

Event listener is a JavaScript event handler, so we can use it to react. But we will focus on-event type handler because it is simple like HTML, and also it is used more often. It also a group of properties offered by elements (e.g. links, buttons, images, forms, the base document, Events are the actions like being clicked, detecting pressed keys, getting focus, etc.). The on-event handler are having names according to their working like onClick, onFocus etc.

HTML vs React Event Handling

Since we have discussed, Event Handling in React is somewhat similar to HTML event handling. But also there are some things to remember which makes them different.

• React events are named using camelCase, rather than lowercase.
• With JSX, you pass a function as the event handler, rather than a string.
• In react, you cannot prevent default values using a false statement.

In HTML, we have the syntax,

<button onclick="Clickme()">
 Click Me</button>

In React, the same event is somewhat different from HTML,

<button onClick = {Clickme}>
Click Me</button>

As you can see, we have both HTML and React code here which performs the same thing, we have to notice that in HTML code we have event handler in lowercase and function is called as a string, but in React we have camelCase event handler and function is called in curly braces because we need to pass function in JSX format.

Preventing Default Using False

In HTML, you might not have used false statement, but HTML have false statement to prevent or stop default behavior or values, In react you need to use preventDefault() method to do the same.

In HTML, we have here prevented default form behavior using false statement:

<form onsubmit="console.log('You clicked submit.'); return false">
  <button type="submit">Submit</button>
</form>

In React, we need to use preventDefault() method to stop or to prevent form behavior:

  function handleSubmit(e) {
    e.preventDefault();
    console.log('You clicked submit.');
  }

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Submit</button>
    </form>
  );
}

Binding Event Handler with ‘this’

In react, we generally don’t need to call addEventListener to add listeners to DOM after it is created, Instead of that just provide a listener when the element is initially rendered. When you define a ES6 class components, there is a common pattern is for an event handler to be a method on the class.

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};


    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

We have to be careful about the meaning of 'this' in JSX callbacks. In JavaScript, class methods don’t get bind by default. Also, if we avoid binding this and directly pass on onClick then it will remain undefined, so it’s better to bind it first.

If you don’t want to bind, then we have two more methods to do the same:

Arrow function

class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }

  render() {
    return (
      <button onClick={() => this.handleClick()}>
        Click me
      </button>
    );
  }
}

The first method we have is arrow function, Generally arrow function is quite good for avoiding binding because instead of giving function name directly we use arrow function which is by default with this, we don’t need to worry about binding.

Public class field syntax

class LoggingButton extends React.Component {

  // Warning: this is *experimental* syntax.
  handleClick = () => {
    console.log('this is:', this);
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

Public class field syntax is ensures that this bound with function callbacks. As we can see, the only difference is we have used arrow function when we are declaring it, and in arrow function method we have used arrow function when we are calling the handleClick function.

Check out video reference to understand more about react event handling: