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

Question

我正在尝试更改 this page 中输入字段的输入文本(总 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 实例上添加的自定义值 setter ，它会覆盖来自 HTMLInputElement 的 setter .prototype(原生的)。完成此操作后，发出一个 input 事件以通知框架该值已更改，以便框架正确考虑。

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