Best Practices for Triggering Change or Input Events in React

Problem Background and Challenges

In modern frontend development, integrating React with third-party libraries is a common requirement. When using formatting plugins like jquery.mask.js, these plugins directly manipulate the DOM element's value property, but this doesn't automatically trigger React's event handling system. This leads to situations where React components cannot detect value changes, causing data synchronization issues.

How React's Event System Works

React wraps native DOM events through its synthetic event system. For input elements, React listens to both browser onChange and onInput events, and tracks value changes by overriding the DOM element's value property setter. While this design optimizes event handling, it also creates integration challenges with third-party libraries.

Solution for React ≥ 15.6.1

For newer versions of React, the correct approach is to use native DOM APIs to set the value and then trigger the appropriate event:

const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
  window.HTMLInputElement.prototype, 
  'value').set;
nativeInputValueSetter.call(input, newValue);
const event = new Event('input', { bubbles: true });
input.dispatchEvent(event);

This method bypasses React's override logic by directly calling the native value setter, ensuring events are properly handled.

Compatibility Solution for React ≤ 15.6.0

For earlier versions of React, an additional simulated flag is required:

input.value = newValue;
const event = new Event('input', { bubbles: true });
event.simulated = true;
input.dispatchEvent(event);

The simulated flag informs React that this is a simulated event, preventing it from being filtered out by deduplication logic.

Deep Dive into Implementation Principles

React's event deduplication mechanism is based on value change detection. When no actual value change is detected, React ignores duplicate events. By using native setters or the simulated flag, we ensure events are properly triggered and processed.

Practical Application Recommendations

In real projects, it's recommended to encapsulate event triggering logic into reusable utility functions with conditional checks for React versions. Pay attention to event bubbling settings to ensure events can be captured by appropriate handlers in the component tree.