javascript - 小部件的预填充字段

Question

我必须在我的网站上使用一个小部件。我无权访问小部件源代码(缩小、混淆)。小部件与我的 DOM 一起工作，插入一些 div，而不是框架。小部件可能是用 react 构建的(某些 div 上有 react 前缀)。

用例:用户字段小部件表单，单击“发送”并获得一些反馈。为了改善用户体验，我想预填这些字段。

根据widgets公司的说法，没有办法做到。
我没有反应经验。

到目前为止我尝试了什么:

1. 在 DOM 就绪后为输入设置一个值 -> 部分工作。字段已预先填充，但如果我尝试更改其中一个字段，值就会消失。我认为，值存储在其他地方并且只复制到输入。

2. 尝试在值更改后手动触发输入事件(更改、焦点、按键)以初始化小部件脚本 -> 无结果。

3. 尝试模拟按键事件 -> 遇到浏览器安全问题。

还有什么我可以做的吗？

Answer 1

当涉及到更改输入值时，React 做了一些诡计，因为它覆盖了 input 元素的 value 的默认 getter/setter 并且它有自己的值跟踪器。要在 React 中处理更改，您需要使用 native value setter 为输入提供新值，然后分派(dispatch)输入事件:

const App = () => <input id="input" onChange={({target: {value}}) => console.log(`input event handled in React with value: ${value}`)} />

ReactDOM.render(<App/>, document.getElementById("root"));

document.getElementById("dispatch-fake-event").addEventListener("click", () => {
  const inputEl = document.getElementById("input");
  Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value").set.call(
  inputEl,
  "new value"
);
  const event = new Event("input", {
    bubbles: true,
    cancelable: false
  });
  inputEl.dispatchEvent(event);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.development.js"></script>

<div id="root"></div>
<button id="dispatch-fake-event">dispatch fake event</button>