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

Posted 2023-02-22

【中文标题】清除带有初始值 React 的 Formik 字段

【英文标题】：Clear Formik field with initial value React

【发布时间】：2020-02-03 14:26:09

【问题描述】：

代码沙盒：

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

问题：

单击重置按钮并清除值为“初始值”的字段

---

尝试：

通过以下方式重置表单的变体太多：

resetForm() setFieldValue(<your_field_name>, '') 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>
  )/>
)

【参考方案1】：

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

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

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

如果您需要删除多个字段，请查看此方法： setValues(q: '')

【参考方案2】：

您现在可以通过

重置 formik

formik.resetForm(
    values:  name: 'Custom initial values', email: '' ,
);

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

【讨论】：

这会重置所有值，OP 只想重置一个。

【参考方案3】：

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

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

希望对你有帮助