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

IT技术 javascript jquery reactjs dom-events
2021-05-22 03:20:56

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

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

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

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

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

2个回答
//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)

从我们在评论中的讨论来看,我的猜测是您需要为您计划修改的每个输入触发一个更改事件。

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