Trigger onChange for React Input

• JavaScript

在 React 16 中（包括 React 15.6 及之后的版本），如果想要用 JavaScript 在外部触发一个 input 组件的 onChange 事件，需要做如下的几个事情：

  1. 首先，让 React 记录下新的 value 值。React 通过 defineProperty 封装了 value 的 set 方法，因而直接调用 input.value = xxx 并不能达到预期的效果（实际触发的是 React 封装的 setter，而不是实际 DOM 的 setter）。为此，可以使用如下的方法绕过去：
var input = document.querySelector('.xxx');
var originalSetter =
  Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value').set;
originalSetter.call(input, 'your value here');
  1. 其次，需要触发一次 onChange 的事件，好让 React 的组件可以在原来既定的回调函数中处理新的数据：
var event = new Event('input', { bubbles: true });
input.dispatchEvent(event);

以下是一个完整可用的方法：

function change(input, value) {
  const setter =
    Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value').set;
  setter.call(input, value);

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