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

Question

我正在尝试更改 this page 中输入字段的输入文本（总 INR），方法是：

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

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

我试过 trigger() 和这里提到的 sendkeys 插件：

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

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

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 实例上添加的自定义值 setter，它会覆盖来自 HTMLInputElement.prototype（原生的）。完成后，发出一个 input 事件以通知框架该值已更改，以便框架正确考虑。

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

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

Changing input text of a React app using javascript

javascript

jquery

greasemonkey

tampermonkey

userscripts