Clear Formik field with initial value React

user_9464680 0
Viewed 9632

CodeSandbox:

https://codesandbox.io/s/kind-fire-q4o45

Question:

Click on reset button and clear a field with value "initial value"

Attempts:

There are too many variants to reset form via:

  1. resetForm()
  2. setFieldValue(<your_field_name>, '')
  3. form.current.reset()

But this list doesn't helpful when you have initial value in formik field.

Snippet:

import React from 'react'
import {Formik, Form, Field} from 'formik'

const Search = () => (
  <Formik onSubmit={({q}, {setSubmitting}) => {
    setSubmitting(false)
  }} initialValues={{q: 'initial value'}} render={({resetForm}) => (
    <Form>
      <Field name='q' />
      <button type="reset" onClick={() => resetForm()}>Reset</button> {/* <== Reset */}
    </Form>
  )}/>
)
formik reactjs forms html javascript
3 Answers

You're totally right - if you have some initial form state, the resetForm action will set the values to those initials. setFieldValue probably the only way to manually clear the field:

<button type="button" onClick={() => setFieldValue('q', '')}>
  Drop field
</button>

notice, type='reset' not need here...

In case when you need to drop multiple fields, take a look at this method: setValues({q: ''})

user_37846030
user_58939210

yes when you reset form values it will reset it to default value you can do the following 

<Formik
  enableReinitialize
  onSubmit={(values, { setSubmitting }) => {
    values.q = '';
    setSubmitting(false);
  }}
  initialValues={{ q: "initial value" }}
  render={({ resetForm }) => (
    <Form>
      <Field name="q" />
      <button type="submit">
        Reset form
      </button>{" "}
      {/* <== Reset */}
    </Form>
  )}
/>

Hope it helps

user_66777420
Related