如何通过Tampermonkey正确修改React表单组件的字段值？

问题原因 #

React受控组件的输入值默认与组件内部state绑定，仅修改DOM的value属性不会触发React的状态同步逻辑，后续组件重渲染时会用内部存储的旧值覆盖手动修改的DOM内容，提交请求时也只会携带React内部存储的旧值。

通过模拟用户真实输入的事件流触发React的状态同步，无需依赖React内部私有属性，兼容性最好：

// 封装通用修改函数
function setReactInputValue(inputElement, newValue) {
  // 保留原生value属性的setter，避免被框架改写的属性影响
  const nativeValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value').set;
  nativeValueSetter.call(inputElement, newValue);
  
  // 触发input事件通知React值发生变化
  inputElement.dispatchEvent(new Event('input', { bubbles: true }));
  // 部分需要失焦才同步的组件需额外触发change事件
  inputElement.dispatchEvent(new Event('change', { bubbles: true }));
}

注意bubbles: true参数不可省略，React的事件监听默认挂载在文档顶层，需要事件冒泡才能被捕获。

使用方法：

• 先通过DOM选择器获取目标输入框元素，示例：const targetInput = document.querySelector('input[name="price"]')
• 调用函数传入目标值：setReactInputValue(targetInput, '1299')

该方法同样适用于textarea、select等常规表单元素，仅需替换HTMLInputElement为对应元素原型即可。

如果站点做了自定义事件拦截导致方案1失效，可以通过React挂载在DOM元素上的内部私有属性直接触发状态更新：

function setReactValueByInternal(element, newValue) {
  // 查找元素上挂载的React内部属性
  const reactInternalKey = Object.keys(element).find(key => 
    key.startsWith('__reactProps') || key.startsWith('__reactFiber') || key.startsWith('__reactEvents')
  );
  if (reactInternalKey) {
    // 直接调用React绑定的onChange回调同步状态
    element[reactInternalKey].onChange?.({ target: { value: newValue } });
    // 同步更新DOM显示
    element.value = newValue;
  }
}

特殊场景适配 #

• 复选框、单选框修改时，将value替换为checked，事件触发逻辑保持一致
• 富文本编辑器等复杂组件，修改前可先调用element.focus()模拟聚焦，修改完成后调用element.blur()模拟失焦触发同步

内容的提问来源于stack exchange，提问作者jan.1974