Sawtaytoes/OneForm

Reset values

Closed this issue ยท 1 comments

Hi,
I'm playing around with OneForm and it is great ๐Ÿ‘

I don't get how it should work (resetting form values I mean) below example from the playground.

...
const formSubmitted = useCallback(({ registeredValues }) => {
    //alert(JSON.stringify(registeredValues, null, 2));
    const values = {}
  }, []);
...

In the doc's you can find:

  • To reset all form values after submitting successfully, just pass {} to values

How should I do this the right way?

I see what you're doing.

You'll want to have a separate variable for it and pass it into OneForm when you're done:

const [values, setValues] = useState()

const formSubmitted = useCallback(({ registeredValues }) => {
    //alert(JSON.stringify(registeredValues, null, 2));
    setValues({})
  }, []);

return <OneForm values={values}>
// ...

There are various ways of handling it, but right now, resetting the form can only be done by passing a new object to values.


I think exposing a resetFieldValues function or resetFields in useFormSubmission might be a good addition in the future; although, without useSubformEffect or Subform, you wouldn't be able to use it after the form submits like your example :/.

Another way to fix this is using JavaScript events. I haven't implemented a solution just yet, but there are multiple ways to get access to OneForm's context outside of being a React component rendered inside. That would provide a way use useFormSubmission at the root level (where you're defining OneForm).