使用React创建的表单不会更新支持状态对象

Question

我正在尝试自动化Instagram网络应用程序的登录表单:

https://instagram.com/accounts/login/

使用以下代码(您可以在Chrome控制台上运行它):

var frm = window.frames[1].document.forms[0];
frm.elements[0].value = 'qacitester';
frm.elements[1].value = 'qatester';
frm.elements[2].click();

即使填充了输入,当我监视XHR请求时,我看到这是发布的:

用户名=&密码=&意图=

而不是这个:

用户名= qacitester&密码= qatester&意图=

并导致Web应用程序无法进行身份验证.你知道为什么输入值没有转移到React的支持状态(模型？)对象吗？

Answer 1

Instagram正在使用linkStateReactLink中的方法:

http://facebook.github.io/react/docs/two-way-binding-helpers.html

登录页面链接到bundles/Login.js包含压缩代码的内容,如下所示:

o.createElement("input", {
    className:"lfFieldInput",
    type:"text",
    name:"username",
    maxLength:30,
    autoCapitalize:!1,
    autoCorrect:!1,
    valueLink:this.linkState("username")
}))

如果查看ReactLink的文档,这意味着只有当输入字段触发change事件时,输入字段值才会返回到状态.但是,它并不像在相关节点上触发更改事件那么简单 - 我认为由于React规范浏览器事件的方式.React文档特别指出,由于各种原因,React中的onChange与浏览器中的onChange不完全相同:

http://facebook.github.io/react/docs/dom-differences.html

幸运的是,在你的情况下,Instagram正在使用React with Addons,它允许你访问React TestUtils,所以你可以这样做:

var frm = window.frames[1].document.forms[0];
var fReact = window.frames[1].React;
fReact.addons.TestUtils.Simulate.change(frm.elements[0], {target: {value: 'qacitester' }});
fReact.addons.TestUtils.Simulate.change(frm.elements[1], {target: {value: 'qatester' }});
frm.elements[2].click();

更多文档:

http://facebook.github.io/react/docs/test-utils.html

请注意,由于登录表单本身位于iframe中,因此必须使用该iframe中的React实例,否则TestUtils将无法正确找到节点.

这仅适用于页面上包含React Addons的情况.React的正常非Addons构建将需要另一个解决方案.但是,如果您特别谈论ReactLink,那么无论如何这都是一个插件,所以这不是问题.

Answer 2

登录表单实际上位于 iFrame 内，这使事情变得更加复杂。我能够从 chrome 控制台成功提交运行以下代码的登录。我正在使用 React 的 TestUtils，但你可能对 AutoType 没问题：

// run in Chrome console
var frame = document.querySelector('iframe[src*="login"]');
var s = document.createElement('script');
var username = frame.contentDocument.querySelector('input[name="username"]');
var password = frame.contentDocument.querySelector('input[name="password"]');
s.src = "https://fb.me/react-with-addons-0.12.0.js";
frame.contentDocument.body.appendChild(s);

// wait for the script request to resolve and use:
change = frame.contentWindow.React.addons.TestUtils.Simulate.change;
change(username, {target: {value: 'My Great Username'}});
change(password, {target: {value: 'securepassword'}});

背景

React 使用自己的虚拟事件系统，并且通常使用受控组件，这本质上意味着输入value由 React 设置并向下渗透到 DOM 元素。

考虑到这一点，我相信您遇到的问题是因为 React 在输入上查找关键事件，并使用事件发生时的输入值来设置 DOM 元素的值。由于您只是设置valueDOM 元素的属性，因此您打破了受控组件循环。

KeyboardEvent我做了一个快速的峰值尝试在输入上发送 a ，但遗憾的是，它没有成功。如果我确实成功了，我会更新我的答案。

不令人满意的解决方法：

使用 casper/phantomjs 自动填写表单。这意味着您不必担心自己调度事件，您可以让“浏览器”为您做这件事。它也比在控制台中手动工作更好。