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

Question

我试图通过执行以下操作来更改此页面中输入字段的输入文本（总 INR） ：

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

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

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

似乎什么都不起作用。是否有可能在此页面上完全像人类一样更改输入值？

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

Answer 1

该页面在底层使用了 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