Очистить поле Formik с начальным значением React

Question

CodeSandbox:

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

Вопрос:

Нажмите на кнопку сбросаи очистите поле со значением «начальное значение»

---

Попытки:

Слишком много вариантов для сброса формы с помощью:

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

Но этот список бесполезен, если у вас есть начальное значение в поле formik.

---

Фрагмент:

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>
  )}/>
)

Answer 1

Вы абсолютно правы - если у вас есть начальное состояние формы, действие resetForm установит значения этих инициалов. setFieldValue вероятно единственный способ вручную очистить поле:

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

обратите внимание, что это не должно быть type='reset' ...

В случае, когда вам нужнопропустите несколько полей, взгляните на этот метод: setValues({q: ''})

Answer 2

да, когда вы сбрасываете значения формы, он сбрасывает его до значения по умолчанию, вы можете сделать следующее

<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>
  )}
/>

Надеюсь, это поможет