Main React Handle Events

In React, handling user interactions and form submissions is crucial for building interactive and dynamic web applications. Three commonly used event handlers in React are onClick, onChange, and onSubmit. In this blog post, we will explore these event handlers and understand when to use each of them effectively.

1. onClick

The onClick event handler is used to handle user clicks allowing users to interact with elements such as buttons, links, or other clickable elements.

Implementing onClick event handler:

  function App() {
    function handleClick() {
    // write desired action upon button being clicked 
       console.log("I am getting clicked!")
    }

    return (
      <div>
        <h1>React Events</h1>
        <p> Learning the basics of onClick </p>
        <button onClick={handleClick}>Click Me</button>
      </div>
    )
  }

Note that, in this example, the handleClick function will be executed when the button is clicked, and it will log the message "I am getting clicked!" to the console.

2. onChange

The onChange event handler is used to track and respond to changes in form inputs or other interactive elements - often used with , , and inputs. It allows you to capture a user's input and process it in real-time.

Implementing onChange event handler:

  function App() {
    function handleClick() {
    // write desired action upon button being clicked 
      console.log("I am getting clicked!")
    }

    function handleChange(event) {
      console.log(event.target.value)
    }

    return (
      <div>
        <h1>React Events</h1>
        <p> Learning the basics of onChange</p>
        <button onClick={handleClick}>Click Me</button>
        <input type="text" placeholder="Type something" 
         onChange={handleChange} />
      </div>
    )
  }

Note that in the code above, whenever the user types something into the input field, the handleChange function is called. The handleChange function logs the current value of the input field to the console using event.target.value.

3. onSubmit

The onSubmit event handler is used to handle form submissions - it "listens" for form elements. It is triggered when the user submits a form, usually by pressing the Enter key or clicking a submit button.

Implementing onSubmit event handler:

  function App() {
    function handleClick() {
    // write desired action upon button being clicked 
      console.log("I am getting clicked!")
    }

    function handleChange(event) {
      console.log(event.target.value)
    }

    function handleSubmit(event) {
      event.preventDefault()
      console.log("submitting form")
    }


    return (
      <div>
        <h1>React Events</h1>
        <p> Learning the basics of onSubmit </p>
        <button onClick={handleClick}>Click Me</button>
        <form onSubmit={handleSubmit}>
          <input type="text" placeholder="Type something" 
           onChange={handleChange} />
        </form>
      </div>
    )
  }

Note that in the code above, the onSubmit event handler is attached to the

element. When the form is submitted (typically by pressing Enter or clicking a submit button), the handleSubmit function is triggered and the message "submitting form" is logged to the console.

Conclusion

Understanding the differences between onClick, onChange, and onSubmit in React is crucial for handling user interactions effectively. By utilizing these event handlers appropriately, you can create engaging user experiences, capture user input, and handle form submissions in your React applications. Remember to choose the event handler that aligns with the specific interaction or task you want to accomplish.