我正在尝试比较一些不同的框架(angularjs、flux+reactjs 和 emberjs),以完成一个最小的待办事项列表应用程序。
您可以在这里找到我的代码:
https://github.com/jurgob/todo_test (在flux目录中你可以找到实现)
我想以编程方式填写并发送表单以将项目添加到我的待办事项列表中。
此代码适用于 Angular 和 emberjs:
$('.addItemText').val('test'); $('.addItemText').change(); $('.addItemBtn').click();
但不适用于reactjs。
我也尝试过使用 sendkeys jquery 插件 ( https://github.com/dwachss/bililiteRange/blob/master/jquery.sendkeys.js ),但没有成功。
这是我的通量实现: https://github.com/jurgob/todo_test/blob/master/flux/main.js
作为补充说明:我构建了一个 casperjs 脚本来从 headless 浏览器执行它们,并使用 casper.sendKeys 函数,它适用于所有框架(您可以在此处找到代码 https://github.com/jurgob/todo_test/blob/master/tests/maintest.js )
最佳答案
该代码应该适用于 React,但是您可以在此示例中放弃 jQuery 并使用 refs。有关引用的更多信息可以在这里找到:https://facebook.github.io/react/docs/more-about-refs.html
实际上,虽然您不应该自己设置属性和触发事件,但可以使用状态来设置属性,并且您可以通过 XHR 提交表单请求,而不是填写表单并模拟点击。
我还简要查看了您的代码,并注意到您直接操作 props,这是一种反模式,如果您需要在不同组件之间保持数据同步,请考虑将组件传递回上游,创建一个全局事件发射器,或使用像 Flux 这样的模式:https://facebook.github.io/react/blog/2014/05/06/flux.html
关于javascript - 使用脚本填写并提交一个reactjs表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27570065/