使用外部 javascript 更改 Material UI 输入字段的值

Question

假设我正在访问一个使用 Material UI 的在线表单，例如 https://codesandbox.io/s/material-demo-forked-kigre?file=/index.js

我想使用控制台 javascript 为输入字段填充一些值，例如

for (input of document.getElementsByTagName('input')) {
  input.value = "new value";
  console.log(input.value);
}

当输入字段值发生变化时，这首先会起作用，并且控制台可以记录更新的值。但是，正如您所看到的实际值“您的输入值是：test”的显示并没有改变，并且一旦您单击输入字段，它就会恢复到原来的值。

你能写一个可以实际改变输入字段值的外部javascript吗？我相信没有那么简单，可能需要调度事件之类的东西？

Answer 1

你可以这样做：

1. 查找 Material UI 输入字段（例如，按类名）
2. 查找名为__reactPropsxxxxx 的属性（最后几位每次都不一样）
3. 执行onChange函数

这是一个示例代码：

for (input of document.getElementsByClassName("MuiInput-input")) {
  for (key in input) {
    if (key.startsWith("__reactProps")) {
      input[key].onChange({target: {value: "changed!"}});
      break;
    }
  }
}