清除具有初始值 React 的 Formik 字段

Clear Formik field with initial value React

代码沙箱:

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

问题:

单击重置按钮并清除值为 "initial value"

的字段

尝试次数:

变体太多,无法通过以下方式重置表格:

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

您完全正确 - 如果您有一些初始表单状态,resetForm 操作会将值设置为这些初始状态。 setFieldValue 可能是手动清除字段的唯一方法:

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

注意,type='reset'这里不需要...

如果您需要删除多个字段,请看一下这个方法: setValues({q: ''})

是的,当您重置表单值时,它会将其重置为默认值 您可以执行以下操作

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

希望对您有所帮助

您现在可以通过

重置 formik
formik.resetForm({
    values: { name: 'Custom initial values', email: '' },
});

https://formik.org/docs/migrating-v2#resetform