使用 javascript 更改 React 应用程序的输入文本

如何解决使用 javascript 更改 React 应用程序的输入文本

我正在尝试通过以下方式更改 this page 中输入字段的输入文本（总 INR）：

$(".cKOnhg").last().attr('value',Math.random() * 100000);

当检查输入的“value”属性更改为随机数时，它会在几秒钟后自动变回 0（或手动输入的数字）。

我已经尝试过 trigger() 和这里提到的 sendkeys 插件：https://stackoverflow.com/a/13946504/82985

似乎没有任何效果。甚至可以在此页面上完全像人类一样更改输入值吗？

我正在尝试更改输入值并自动提交表单。

解决方法

此页面在幕后使用 React。当您尝试以编程方式设置值时，问题在于您只更新 DOM，但底层 React 的状态保持不变，因此 DOM 在下一个渲染滴答时被重置。

为了正确更新输入值，请使用此代码（您根本不需要 jQuery）：

function setNativeValue(element,value) {
  const valueSetter = Object.getOwnPropertyDescriptor(element,'value').set;
  const prototype = Object.getPrototypeOf(element);
  const prototypeValueSetter = Object.getOwnPropertyDescriptor(prototype,'value').set;

  if (valueSetter && valueSetter !== prototypeValueSetter) {
    prototypeValueSetter.call(element,value);
  } else {
    valueSetter.call(element,value);
  }
}

// Wait for the DOM to be fully rendered by React before doing anything
window.addEventListener("load",function() {
    const el = Array.from(document.querySelectorAll('.cKOnhg')).pop();

    setNativeValue(el,Math.random() * 100000);
    el.dispatchEvent(new Event('input',{ bubbles: true }));
});

说明：为了在 React 中触发值更改，您必须绕过框架在 HTMLInputElement 实例上添加的自定义值设置器，该设置器会覆盖 HTMLInputElement.prototype（原生的）。完成此操作后，发出 input 事件以通知框架该值已更改，以便框架正确考虑。

关于此的更多信息：https://github.com/facebook/react/issues/10135