以编程方式填写 reactjs 表单

Question

我正在编写一个用户脚本，但无法填写由 reactjs 制作的表格。我的代码：

document.querySelector("#id-username").value = "name@domain.xx";
// Attempt to notify framework using input event
document.querySelector("#id-username").dispatchEvent(new Event("input", {data:"name@domain.xx"}));
// Attempt to notify framework using change event
document.querySelector("#id-username").dispatchEvent(new Event("change"));
// This doesn't help either
document.querySelector("#id-username").dispatchEvent(new Event("blur"));
// Submit the form using button (it's AJAX form)
document.querySelector("fieldset div.wrap button").click();

加载页面后，我将这段代码输入到开发者工具控制台。但是，该表单忽略了我的编程输入：

表格可以找到here。我工作的目的是自动登录给定的网站。我提供了具体的 URL，但我希望可以应用于任何 reactjs 表单的通用解决方案（例如，使用一些 reactjs API）。其他用户可能需要此解决方案来为其网站编写自动化测试。

Answer 1

必须将事件发送到 ReactJS 以使其注册值。特别是 input 事件。确保事件冒泡非常重要——React JS 在 document 级别只有一个侦听器，而不是在输入字段上。我设计了以下方法来设置输入字段元素的值：

function reactJSSetValue(elm, value) {
    elm.value = value;
    elm.defaultValue = value;
    elm.dispatchEvent(new Event("input", {bubbles: true, target: elm, data: value}));
}

Answer 2

对于 Chrome 版本 64，有一个解决方法。否则事件将被忽略。

参见：https://github.com/facebook/react/issues/10135#issuecomment-314441175

（完全归功于 link 中的 fatfisz）

代码

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);
  }
}

用法

setNativeValue(textarea, 'some text');
// you must dispatch the input event, or the value will not update !!!
textarea.dispatchEvent(new Event('input', { bubbles: true }));

以编程方式填写 reactjs 表单

Programmatically fill reactjs form

javascript

reactjs

greasemonkey

userscripts

代码

用法