Handling forms with react

gistfile1.txt

# How to handle forms with React

1- Save all raw values in state, never read from dom using getdomnode.

2- Do not save whether the value is valid or not in state. This is the most
important point.  Whether a form is valid or not can be inferred from state
form variables during render. So, we never have a state variable like
formValid. Otherwise, it can go out of sync.

3- Showing errors: We initially do not want to show the errors, even if the
form is invalid. To do that, we have a `submitAttempted' state variable that
is set once the form submit is attempted. So, we only show the error message
for the form if submit has been attempted and form is invalid.

4- Sometimes, we want to display the errors in a field as soon as the user
blurs out, before even attempting submit. In that case, we need to do the
following similar to how we handle form errors: Set a dirty state on that
field in the state.  Again, do not put whether the field is valid or not in
the state, we can infer that from the current value of the field. We show the
error of individual fields in the following cases: If submit has been
attempted once, show it even if the field is not dirty. If submit has not been
attempted yet, show it once the field becomes dirty. So, the blur handler
should set the field to be a dirty field.

5- After the form is submitted and server response is succesful, we can change
the form state variables to pristine form, by setting submitAttempted and
fieldDirty to false.

6- Each form has an array of validators, which can be obtained via
getValidators by adding something similar to generateValidatorsForPerson. The
usual trick there is to return closures which accept the plain values, so that
we can reuse the same function whether the react component reads values from
state or whether we do validation on a store.

7- Each form has a geterrors method that returns an array of errors. Note that
currently we display them at the end of the form, not inline. TODO: figure out
and explain how to do inline form errors (hint: field key could be used there).

8- https://github.com/prometheusresearch/react-forms follows similar ideas, it
also uses cursors as we do in buyercrowd login page. it used to not do
realtime errors, but maybe it does now. Maybe we should adapt that in the future.

9- https://github.com/insin/newforms is worth a look, but I think this was
less ambituous and cloned django interface.

10- We need to discuss how much abstraction we should put into
onchangehandlers etc. 
may be adapted generally, though we might need to separate it out from cursor
implementation. See wingspan-forms, this seems the best solution for now. Everything should be DATA.