使用脚本填写并提交 reactjs 表单答案

【问题标题】：fill and submit a reactjs form with a script使用脚本填写并提交 reactjs 表单
【发布时间】：2014-12-19 16:27:52
【问题描述】：

我正在尝试比较一些不同的框架（angularjs、flux+reactjs 和 emberjs）做一个最小的待办事项列表应用程序。

你可以在这里找到我的代码：

https://github.com/jurgob/todo_test （在flux目录中可以找到实现）

我想以编程方式填写并发送表单以将项目添加到我的待办事项列表中。

此代码适用于 angular 和 emberjs：

$('.addItemText').val('test'); $('.addItemText').change(); $('.addItemBtn').click();

但不适用于 reactjs。

作为附加说明：我已经构建了一个 casperjs 脚本以从无头浏览器执行它们，并使用 casper.sendKeys 函数它适用于所有框架（您可以在此处找到代码https://github.com/jurgob/todo_test/blob/master/tests/maintest.js）

【问题讨论】：

所以你是说这确实与 casper 一起工作？这些测试听起来好像它们应该存在于 casper/phantom/selenium 级别，所以我个人会忘记尝试在单元级别使用 jQuery 进行测试，特别是因为 React 使用它自己的事件系统。如果您可以发布一个对这种失败有帮助的孤立示例，那么对于大多数人（包括我自己）来说，一个回购链接是太多的工作

【解决方案1】：

该代码应该适用于 react，但是您可以在此示例中放弃 jQuery 并使用 refs。更多关于 refs 的信息可以在这里找到：https://facebook.github.io/react/docs/more-about-refs.html

实际上虽然您不应该自己设置属性和触发事件，但使用状态来设置属性，您可以通过 XHR 提交表单请求，而不是填写表单并模拟点击。

我还简要查看了您的代码并注意到您正在直接操作道具，这是一种反模式，如果您需要在不同组件之间保持数据同步，请考虑将组件传回上游，创建一个全局事件发射器，或使用类似flux的模式：https://facebook.github.io/react/blog/2014/05/06/flux.html

【讨论】：