时间戳

首页 > 解决方案 > 小部件的预填充字段

javascript - 小部件的预填充字段

问题描述

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

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

据小部件公司称，没有办法做到这一点。
我没有反应的经验。

到目前为止我已经尝试过：

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

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

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

还有什么我可以做的吗？

标签： javascriptreactjs

解决方案

当涉及到更改输入值时，React 会使用一些技巧，因为它会覆盖元素的默认 getter/setter，value并且input它有自己的值跟踪器。要在 React 中处理更改，您需要使用本机valuesetter 为输入提供新值，然后调度输入事件：

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>

推荐阅读