Question

代码沙箱：

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

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

希望有帮助

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

2 个答案: