Handling events with ReactJS

The tutorial provides the usage of events in React Application, synthetic events in React, event declaration in React, event example in React.

What is an event in React ?

Any user action on the Application front end or system generated action creates an event , triggered to perform specific operations. The click on the mouse, pressing keyboard, application operations each classifies as an event. Although the event handling in React is similar to handling events in the DOM , but few points need to be considered:

  • React events are named using camelCase
  • React JSX uses function as event handler rather than string
<button onClick={updateUser}> Update </button>
  • React cannot return false to prevent default behavior rather need to use preventDefault explicitly
function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('handling onclick event...');
  }
  return (
    <a href="#" onClick={handleClick}>
      Click Event
    </a>
  );
}

Synthetic Event in React

The event handling in React uses the Synthetic Event mechanism , a cross-browser wrapper around the browser’s native event and provides the native event interfaces like stopPropagation() and preventDefault().. In the above example, e is a Synthetic Event which is defined according to the W3C spec.

Synthetic Event Pooling:

Synthetic events supports pooling. The object in synthetic events can be reused and all properties will be nullified after the event callback is invoked. To access the event properties in an asynchronous way, event.persist() should be called on the event which removes synthetic event from the pool to allow reference to the event.

Registering Event in Capture Phase: Events can be registered for the capture phase. Appending the Capture to the event name instead of using onClick (example – onclickCapture) allows to handle the capture phase. The below given are the supported events:

  • Clipboard Events – onCopy onCut onPaste
  • Composition Events – onCompositionEnd onCompositionStart onCompositionUpdate
  • Keyboard Events – onKeyDown onKeyPress onKeyUp
  • Focus Events – onFocus onBlur
  • Form Events – onChange onInput onInvalid onReset onSubmit
  • Generic Events – onError onLoad
  • Mouse Events – onMouseMove onMouseOut onMouseOver onMouseUp
  • Pointer Events – onPointerDown onPointerMove onPointerUp onPointerCancel onGotPointerCapture
  • Selection Events – onSelect
  • Touch Events – onTouchCancel onTouchEnd onTouchMove onTouchStart
  • UI Events – onScroll
  • Wheel Events – onWheel
  • Media Events – onAbort onCanPlay onCanPlayThrough onDurationChange onEmptied onEncrypted
  • Image Events – onLoad onError
  • Animation Events – onAnimationStart onAnimationEnd onAnimationIteration
import React from 'react';
class App extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
         userInput: 'Default input text shown ...'
      }
      this.updateState  = this.updateState .bind(this);
   };
   updateState() {
      this.setState({userInput: 'Text updated on event click ...'})
   }
   render() {
      return (
         <div>
            <button onClick = {this.updateState }>Update</button>
            <h4>{this.state.userInput}</h4>
         </div>
      );
   }
}
export default App;
Forms example in ReactJS - Default Input Text
Forms example in ReactJS – Default Input Text
Forms example in ReactJS - text update on event click
Forms example in ReactJS – text update on event click