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

Posted 2023-04-18

【中文标题】使用 javascript 更改 React 应用程序的输入文本

【英文标题】：Changing input text of a React app using javascript

【发布时间】：2021-06-06 16:59:53

【问题描述】：

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

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

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

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

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

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

【问题讨论】：

1) 如果问题中的代码正常工作，但其他东西正在重置它的值，那么您需要找到导致重置发生的代码行。它不是 JS 或 jQuery 的内置行为；您的代码中的某些内容导致它发生。不幸的是，我们对此无能为力。作为调试的起点，我建议使用 devtools 检查哪些事件处理程序绑定到元素，以查看它们执行的操作。 2) 与问题无关，但要更新input 的值，请使用val()，而不是attr()：jsfiddle.net/RoryMcCrossan/78rdbpfv

另外，jQuery 没有加载到您链接到的页面中。 $ 指的是哪个库？

感谢您的提示。我正在使用 Tampermonkey 注入 jquery。

@RoryMcCrossan “我建议使用 devtools 检查哪些事件处理程序绑定到元素以查看它们执行的操作” - 我该怎么做？

如果您使用的是 Chrome，请在浏览器中右键单击要查看的元素，然后单击“检查”。然后在右窗格的右侧选项卡中单击“事件侦听器”。其他浏览器具有相同的功能，只是措辞可能略有不同

【参考方案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

【讨论】：

感谢您的回复！现在才看到。。明天试试，告诉你进展如何。

我试过但得到这个错误：TypeError: Cannot convert undefined or null to object in this line const valueSetter = Object.getOwnPropertyDescriptor(element, 'value').set;

我已经编辑了我的答案来解决您的问题

它给出了同样的错误：ibb.co/0Fdy6RG。为了确保代码放置正确，我在window.addEventListener 中放置了一条正确打印的调试消息

我和你一样用 Tampermonkey 测试过这个......我真的不明白那里发生了什么。当您在控制台中复制代码时，您能否确认代码有效（没有load 事件侦听器）？