如何使用 JQuery 填充 React 生成的输入字段答案

【问题标题】：How to populate React-generated input fields with JQuery如何使用 JQuery 填充 React 生成的输入字段
【发布时间】：2016-10-31 00:36:48
【问题描述】：

我正在尝试编写一个书签来自动填写表单，以简化手动测试。该站点是在 React 中实现的。我尝试过使用 JQuery，例如：

$("#emailAddress").val("bob@example.com").changed()

虽然input 字段在浏览器中明显更新，但似乎在后台该字段未被识别为已更改，因为表单提交时验证失败，表示数据丢失。

有没有一种可行的方法来使用 ad-hoc JS 自动填充 React 表单字段，而无需更改任何源代码？

（注意：我知道这种直接操作不是在一般应用程序开发中使用 React 的正确方法。在这里，我正在寻找任何解决方案，无论多么 hacky，以简化临时手动测试）。

【问题讨论】：

这真的取决于这些字段是如何实现的。听起来这些是Controlled Components，这意味着 React 正在控制每个输入应该具有的值。基于 React 的网站使用的流行设计模式是为每个输入字段附加一个 onChange 处理程序，其中每个更改事件都会将字段的新值发送到某个集中存储，这将导致 React 组件重新- 呈现新值。
...所以我认为您希望在每个包含某些值的字段上手动触发更改事件，这将导致这个集中式存储使用您想要的值更新每个字段。跨度>
@MichaelParker -- 谢谢，是的，正如您所描述的，该网站正在使用onChange 机制。关于如何生成适当的更改事件的任何想法？我已经按照stackoverflow.com/a/2856602/6524176 进行了尝试，但我没有任何运气。
看看我的回答

标签： javascript jquery reactjs dom-events

【解决方案1】：

//find element
let elem = document.querySelector("#emailAddress");
//create event
let event = new Event('input', { bubbles: true });
//set value
elem.value="bob@example.com";
//trigger event
elem.dispatchEvent(event)

【讨论】：

你应该得到一个吻，我寻找这个解决方案 3 个月，我已经放弃了。谢谢！！！！！！！！！！！！！！！！！！！！！

【解决方案2】：

根据我们在 cmets 中的讨论，我猜您会希望为您计划修改的每个输入触发一个更改事件。

var element = document.getElementById('emailAddress'),
    event = {
        target: {
            value: 'new value for the input'
        }
    };
element.onchange(event);

【讨论】：

谢谢。不幸的是，我的元素没有onchange 成员，但@Utro 的答案中的解决方案很有效。