React Button Click event handler with example

React Button Click event handler with example

This article covers how to click a button in the reactjs application.

This article covers the following examples.

  • Class component with a button click
  • Functional component with button Click event

In standard apps, Button is attached with a click event. Here button is added with the click event,

<div style="text-align:center">
  <h1>React Button Click Event Example</h1>
  <button click="clickEvent()">Click Me</button>
  <h2>{{ msg }}</h2>
</div>

passed with event handler clickEvent. clickEvent is an event handler javascript function.

function clickEvent() {
  // handle click events
}

In react applications, click event is not supported, instead, it uses onClick with support for es6 and es5 event handlers.

Let’s see how to handle click events in Class and functional components

class components with button click example in react

In the below react component,

  • there is an input form for taking the name of a user
  • Submit button to submit the form data
  • Created event handler for click event in the button
  • In react component, Initialized with a name to the default value in the State object
  • Input text added event handler - handleChange event which will be executed when the user enters the form data.
  • In the handleChange event, update the user-entered data into a state object
  • input and submit fields are wrapped inside a form.

Here is an example input form button with an example

import React, { Component } from "react";

class ButtonExample extends Component {
  constructor(props) {
    super(props);

    this.state = {
      name: "",
    };
  }
  handleClick = () => {
    console.log("Handle click event", this.state.name);
  };
  handleChange = (event) => {
    this.setState({ name: event.target.value });
  };

  render() {
    return (
      <form>
        <input type="text" onChange={this.handleChange} />
        <input type="submit" value="Submit" onClick={this.handleClick} />
      </form>
    );
  }
}

export default ButtonExample;

functional component button click event handler in React

We discussed how the state is managed in class components,

This is an example of stateless components also called functional components.

In the below example, added a functional event expression which is attached to button in the functional component

<button onClick="{handleClick}">Reset</button>

where handleClick is a functional expression Here is a complete example

import React, { useState } from "react";
export default function ResetButton() {
  const handleClick = () => {
    console.log("Button is clicked");
  };

  return (
    <form>
      <div>
        <button onClick={handleClick}>Submit</button>
      </div>
    </form>
  );
}

How do you click a button in React?

The button click is a basic event-handler mechanism

  • when Button is clicked on React component
  • Click Event is fired in HTML
  • To catch the event, click events with the event handler function must be added
  • In react, events names are camel case ie onClick instead of the click event.
  • For a button, you need to add curly braces with an event handler function as given below
<button onClick={handleClick}>Submit</button>

How do you call a function on button click in react JS?

  • In React component, create a button with the onClick event
  • onClick event includes a value with curly branches and javascript function
<button onClick={handleClick}>Submit</button>
  • function expression is declared as
const handleClick = () => {
  console.log("Button is clicked");
};
  • It handles button click events,
  • can also pass parameters as given below
const handleClick = (e) => {
  console.log("Button is clicked", e.target);
};

How onClick work in React?

onClick is a react way of handling click events. the button is an HTML element that calls an event when the click event is executed. It fires an event attach event handler using curly braces

Conclusion

To sum up, We have learned how to add a button click event with code examples in React app.