React 项目内代码触发更新元素的 value 并且触发 input 事件

已知一个站点由 react 构建，手动注入代码并且更新值，react 内部状态得到相应的更新。

项目基础组件库使用了 antd，如果想触发内部状态更新，先更新元素的 value 值，再触发该元素的 input 事件就能完成内部状态更新。

JavaScript 中元素可以直接通过 dispatchEvent 触发事件。

例如：

var event = new Event('input');

// Listen for the event.
elem.addEventListener('input', function (e) { ... }, false);

// Dispatch the event.
elem.dispatchEvent(event);

代码出处

但是在当前这个项目中，不能触发内部状态更新，需要做如下操作。

/**
    * 修改原生元素的值
    * https://stackoverflow.com/questions/23892547/what-is-the-best-way-to-trigger-onchange-event-in-react-js
    * @param {HTMLElement} ele 元素
    * @param {string} value 新值
    * @param {boolean} isInput 是否是 input
    */
const changeNativeValue = (ele, value, isInput) => {
  var nativeInputValueSetter = Object.getOwnPropertyDescriptor(
    isInput ? window.HTMLInputElement.prototype : window.HTMLTextAreaElement.prototype,
    'value',
  ).set;
  nativeInputValueSetter.call(ele, value);

  var ev2 = new Event('input', { bubbles: true });
  ele.dispatchEvent(ev2);
};

转载请注明：OnlyLing - Web 前端开发者 » React 项目内代码触发更新元素的 value 并且触发 input 事件