相关疑难解决方法(0)

我正在写一个用户脚本,我无法填写reactjs制作的表格.我的代码:

document.querySelector("#id-username").value = "name@domain.xx";
// Attempt to notify framework using input event
document.querySelector("#id-username").dispatchEvent(new Event("input", {data:"name@domain.xx"}));
// Attempt to notify framework using change event
document.querySelector("#id-username").dispatchEvent(new Event("change"));
// This doesn't help either
document.querySelector("#id-username").dispatchEvent(new Event("blur"));
// Submit the form using button (it's AJAX form)
document.querySelector("fieldset div.wrap button").click();

我在加载页面后将此代码输入到开发工具控制台中.然而,表格忽略了我的编程输入:

表格可以在这里找到.我的工作目的是自动登录到给定的网站.我提供了特定的URL,但我期望这个问题的通用解决方案(例如,使用一些reactjs API)可以应用于任何reactjs表单.其他用户可能需要此解决方案来为其站点编写自动化测试.

在我觉得做手动功能/对象绑定后,我开始使用箭头功能,并且范围相关的问题令人头疼,但我非常认真地了解使用正常功能(ES5)比使用箭头功能(ES6)更好.

我对这些功能的理解

React中的正常函数:

1. 手动绑定对象/函数以便在函数内部使用状态或道具并避免与范围相关的问题
2. 始终在构造函数中绑定对象/函数,但不直接在渲染中绑定
3. 如果你在构造函数中执行它,那么当你的组件第一次渲染时,Webpack只在bundle.js文件中创建一个新对象/函数
4. 如果你直接在渲染中执行它,那么每次组件渲染和重新渲染时,Webpack都会在bundle.js文件中创建一个新对象/函数
5. 如果你没有绑定,那么你就无法访问状态或道具.您必须将当前对象分配给本地变量,否则this.state或this.props是未定义的

React中的箭头功能:

1. 无需在构造函数中绑定对象/函数也不需要渲染
2. 你不需要依赖当前对象的局部变量interms,即,让那=这个;
3. 您不会有范围问题,并且会自动进行对象/功能绑定

但我的查询是,我听说它建议使用正常的功能,并将其绑定在构造函数,而不是使用箭头功能,因为箭头功能创建新的对象/功能的WebPack bundle.js每次你的组件呈现和重新呈现时间.

这是真的？推荐哪个？

这个线程接受了答案在React中正确使用箭头函数说 - >这取决于你在哪里使用箭头功能.如果在render方法中使用了Arrow函数,那么每次调用render时它们都会创建一个新实例,就像bind的工作方式一样.

对不起,如果你觉得这是一个戏剧性的问题,但这是我最大的疑问.请建议