React Events: Simplified

In my previous post, I talked about Events and Event Handling in JavaScript. In this post, I wanted to continue building on that and review Events and Event Handling in React. Events in React are simpler to use than events in JavaScript. In this post, I will go over the steps needed to add an event listener to a React element and show examples of onClick, onSubmit, and onChange events.

Adding an Event Listener

To add an event listener to a React Element:

1. Add the event listener to the element of interest
2. Create a callback function
3. Pass the callback function as a function reference to the event listener

For example, if we have the following code:

function example(){
  return (<button>Hello<button>)
}

• Add the event listener to the element of interest.

The Event Listener names are a combination of on and the event name itself, such as "Click". Additionally, the event Listener names are camelCased.

The following is an example of the onClick event listener:

function example(){
  return <button onClick={}>Hello<button>
}

• Create a callback function

function example(){
  function eventHandler(){
    console.log("This is the callback function!")
  }
  return <button onClick={}
}

• Pass in the callback function as a function reference

function example(){
  function eventHandler(){
    console.log("This is the callback function!")
  }
  return <button onClick={eventHandler}
}

onClick Event Listener Example

1. Add the onClick event listener to the element of interest.
2. Create a callback function that handles the event.
3. Pass it as a function reference to the event listener.

function example(){
  //create a callback function 
  function handleClick(){
    console.log("this function handles the click event")
  }
  //add the event listener to the element of interest
  //pass in the callback function
  return <button onClick={handleClick}><button>
}

onSubmit Event Listener Example

The onSubmit event listener is used for forms. The onSubmit event listener must be added to the form tag. Additionally, always add e.preventDefault() to prevent any unwanted default behavior.

In order to use the onSubmit event listener:

1. Add the onSubmit event listener to the element of interest.
2. Create a callback function that handles the event.
3. Pass it as a function reference to the event listener.

for example:

function form(){
  //create a callback function that handles the event listener
  function handleSubmit(e){
    //add e.preventDefault()
    e.preventDefault()
    console.log(this function handles the form submit event")
  }

  return(
    //add the event listener onSubmit to the `<form>` tag
    //pass in the callback function as a function reference
    <form onSubmit={handleSubmit}>
      <input type="text" name="name">
    <form>
   )
}

onChange Event Listener Example

The onChange event listener is useful in handling changes to input fields.

1. Add the onChange event listener to the element of interest.
2. Create a callback function that handles the event.
3. Pass it as a function reference to the event listener.

for example:

function form(){
  //create a callback function that handles the event
  function handleChange(){
    console.log("This function handles the onChange event!")}

  return(
    //add the event listener onChange to the `<input>` tag
    <form>
      <input type="text" name="name" onChange={handleChange}>
    <form>
  )
}

Conclusion

In conclusion, creating an event listener in React is much easier in comparison to JavaScript. One can add an event listener in 3 easy steps: 1. Add the event listener to the element of interest 2. Create a callback function 3. Pass the callback function as a function reference to the event listener.

For more information, visit:
Event Handling
React Events