JavaScript修改React应用输入框值后自动回退的技术咨询

你观察到的改完属性几秒后值自动复原，本质是目标页面的输入框属于React 受控组件。这类组件的展示值完全由组件内部维护的状态决定，而非直接读取DOM节点的value属性。你通过jQuery直接修改DOM层的value属性，只是临时篡改了浏览器渲染的DOM快照，React的内部状态完全没有感知到这一变更；等到组件下次重渲染时，就会直接把DOM上的值重置为内部状态存储的原有数值，最终表现为输入值自动回退。

要做到和人类手动输入完全一致的效果，必须走通浏览器原生的事件触发链路，让React的状态监听逻辑捕捉到值的变化，具体操作可以直接在控制台执行：

• 定位目标输入框的原生DOM节点，不要使用jQuery封装对象操作：

  const allInputs = document.querySelectorAll(".cKOnhg");
  const targetInput = allInputs[allInputs.length - 1];
  

• 激活输入框焦点，模拟用户点击输入区域的动作：

  targetInput.focus();
  

• 通过浏览器原生的value setter写入新值，绕开React对输入框属性的重写拦截：

  const originalValueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value").set;
  originalValueSetter.call(targetInput, Math.random() * 100000);
  

• 按真实输入的事件顺序，依次派发原生冒泡事件，同步React内部状态：

  targetInput.dispatchEvent(new Event("input", { bubbles: true }));
  targetInput.dispatchEvent(new Event("change", { bubbles: true }));
  

完成上述步骤后，输入框的值不会再出现自动回退的情况，后续直接定位对应提交按钮，派发原生click事件即可完成表单自动提交。

• 直接用jQuery的.attr()修改value属性，仅修改了DOM的HTML属性，没有触发完整的输入变化事件链路，React完全无法感知到变更
• 常规的.trigger()方法派发的是jQuery封装的事件实例，并非浏览器原生事件，而React的事件监听是绑定在原生事件冒泡流上的，收不到这类自定义事件
• 各类sendkeys类插件本质还是通过DOM属性修改实现值变更，没有打通原生事件的触发链路，无法同步React的内部状态

内容的提问来源于stack exchange，提问作者Yeti