onChange for entire form

I have a form where some field’s values depend on other fields values. I have been using redux-form and have been able to calculate these values using an onChange handler on the top-level form object.

I don’t see an equivalent using formik, is this right? I thought I could hijack the validation function to do this, but it’s not passed the formik bag, only the values to validate.

Another usecase for a form-level onChange is automatic persistence without needing to hit a submit button e.g. something like:

<Formik
  initialValues={JSON.parse(localStorage.getItem('formvalues'))}
  onChange={(values) => {
    localStorage.setItem('formvalues', JSON.stringify(values))
  }}
>
{/* … */}
</Formik>

Another option could be a "submitOnChange` flag.

[benvan]

Sorry to reopen a closed thread, but this seemed like the most appropriate place to follow up on this.

If I understand correctly, the suggestion is to use another component to simulate onChange responses. I can see how that might make sense for something extremely agnostic like FormikPersist, but for the general situation where you wish to cause some effect based on form changes, this doesn’t make sense to me.

Consider a simple form which contains dropdowns for the ingredients of a burger. You wish to render a preview of the burger outside the form somewhere. It would seem fairly simple (and conventional) to do this by passing the form an “onBurgerIngredientsChanged” handler, and hooking that up into the form’s onChange handler.

Am I correct in understand you would suggest instead creating a <BurgerIngredientsChangedDetector /> component, complete with constructor, componentDidMount, componentWillReceiveProps methods …

It seems to me this would very naturally lead people to creating their own <OnFormUpdate hander={someHandler}/> component. In this case… why the extra complexity? Would it not be better to be able to pass Formik an onChange handler?

Just my two cents - I’m facing this problem now with a few forms that are slightly more dynamic than their siblings. Any thoughts would be much appreciated.

Thanks

Edit: Furthermore - and I think this is the bigger issue - by binding “onChange” type handlers into the render lifecycle, you’re coupling two very different concepts. My form might render itself every second if it’s being passed a readonly “counter” value - this doesn’t mean any of the values have changed!

[jaredpalmer]

@prichodko is exactly correct.