javascript - 使用 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 请求时，我看到已发布:

username=&password=&intent=

而不是这个:

username=qacitester&password=qatester&intent=

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

Answer 1

Instagram 使用来自 ReactLink 的 linkState 方法:

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 的文档，这意味着只有在输入字段上触发更改事件时，输入字段值才会发送回状态。然而，它并不像在相关节点上触发更改事件那么简单——我认为是由于 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，那么它无论如何都是一个插件，所以这不是问题。