Question

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

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

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

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

在DOM准备就绪->部分工作之后，设置输入值。字段是预填充的，但是如果我尝试更改其中之一，则值会消失。我认为，值存储在其他位置，并且仅复制到输入中。
试图手动触发输入事件（更改，焦点，键盘输入）以在值更改后初始化小部件脚本->无结果。
试图模拟按键事件->进入浏览器安全性。

还有什么我可以做的吗？

Answer 1

在更改输入值时，React有点麻烦，因为它会覆盖value元素的input的默认getter / setter，并且它具有自己的值跟踪器。为了使更改在React中得到处理，您需要使用本机value设置器为输入提供新值，然后调度输入事件：

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>

Answer 2

Redux表单是react的组成部分，它允许从中收集数据形式并初始化redux形式的初始值，如下所示该示例具有redux形式的初始值，因此该字段将当您要预填充全部或将部分数据转换成表格。另请注意，初始状态也可以是空

let InitializeFromStateForm = props => {
  const { handleSubmit, load, pristine, reset, submitting } = props
  return (
    <form onSubmit={handleSubmit}>
      <div>
       // your components
      </div>
    </form>
  )
}

// Decorate with reduxForm(). It will read the initialValues prop provided by connect()
InitializeFromStateForm = reduxForm({
  form: 'initializeFromState' // a unique identifier for this form
})(InitializeFromStateForm)

// You have to connect() to any reducers that you wish to connect to yourself
InitializeFromStateForm = connect(
  state => ({
    initialValues: state.account.data // pull initial values from account reducer
  }),
  { load: loadAccount } // bind account loading action creator
)(InitializeFromStateForm)

export default InitializeFromStateForm

请找到完整的文档示例here

小部件的预填充字段

2 个答案: