用脚本填充并提交reactjs表单

Question

I'm tryng to compare some differents frameworks (angularjs, flux+reactjs and emberjs) doing a minimal todo list application.

You can find my code here:

https://github.com/jurgob/todo_test (in the flux directory you can find the implementation)

I would like to programmatically fill and send the form to add an item to my todo list.

this code works for angular and emberjs:

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

but not for reactjs.

I've also tried with sendkeys jquery plugin ( https://github.com/dwachss/bililiteRange/blob/master/jquery.sendkeys.js ) without any success.

here is my flux implementation: https://github.com/jurgob/todo_test/blob/master/flux/main.js

as additional note: I've build a casperjs script to performe them from an headlerss browser, and using casper.sendKeys function it works for all the framework (you can find the code here https://github.com/jurgob/todo_test/blob/master/tests/maintest.js )

Answer 1

That code should work for react, however you can ditch jQuery in this example and use refs. More information about refs can be found here: https://facebook.github.io/react/docs/more-about-refs.html

In reality though you shouldn't be setting properties and triggering events on your own, use state to set properties, and you can submit a form request via XHR rather than filling out a form and simulating a click.

I also had a brief look at your code and noticed you were manipulating props directly, this is an anti-pattern, if you need to keep data in sync between different components consider either passing the components back upstream, creating a global eventemitter, or using a pattern like flux: https://facebook.github.io/react/blog/2014/05/06/flux.html