时间戳

首页 > 解决方案 > 清除带有初始值 React 的 Formik 字段

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

问题描述

代码沙盒：

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

标签： javascripthtmlreactjsformsformik

解决方案

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

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

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

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

推荐阅读