In Formik, how to make the Reset button reset the form only after confirmation?
My code below still resets the form even when you click Cancel.
var handleReset = (values, formProps) => { return window.confirm('Reset?'); // still resets after you Cancel :( }; return ( <Formik onReset={handleReset}> {(formProps) => { return ( <Form> ... <button type='reset'>Reset</button> </Form> )}} </Formik> );
We can reset the form by using the resetForm() method of formik. We can register it on the onClick event of the reset button.
If you want to reset the selected value after the form is submitted, you need to provide a controlled value for the Select component. The Formik Field component provides the value in the props object, so you can use it.
The reset() method restores a form element's default values. Regardless of how many uncontrolled input fields your form has, a single call to the reset() method clears all of them. Alternatively, you can clear the values by setting the value property of each ref to an empty string.
Returns true if values are not deeply equal from initial values, false otherwise. dirty is a readonly computed property and should not be mutated directly.
Hello @Aximili you can use resetForm
in onSubmit.
onSubmit={(values, { resetForm }) => { // do your stuff resetForm(); }}
what resetForm
can do?
Imperatively reset the form. This will clear errors and touched, set isSubmitting to false, isValidating to false, and rerun mapPropsToValues with the current WrappedComponent's props or what's passed as an argument. The latter is useful for calling resetForm within componentWillReceiveProps.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With