使用外部 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);
}

这最初似乎是有效的，因为输入字段值确实发生了变化，并且控制台可以记录更新后的值。但是，如您所见，实际值的显示“您的输入值是：测试”并没有改变，一旦您点击输入字段，它就会恢复为原始值。

你能写出一个外部 javascript 来真正改变输入字段的值吗？我相信这不是那么简单，可能需要调度事件之类的东西？

Answer 1

您可以执行以下操作：

找到 Material UI 输入字段（例如按 class 名称）
寻找名为__reactPropsxxxxx的属性（每次最后一位都不同）
执行onChange函数

这是示例代码：

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

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

Change value of Material UI input field with external javascript

javascript

forms

material-ui

textfield

form-fields