代码沙盒:
问题:
单击重置按钮并清除值为“初始值”的字段
尝试:
变体太多,无法通过以下方式重置表单:
-
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>
)}/>
)
最佳答案
您完全正确 - 如果您有一些初始表单状态,resetForm
操作会将值设置为那些初始状态。 setFieldValue
可能是手动清除字段的唯一方法:
<button type="button" onClick={() => setFieldValue('q', '')}>
Drop field
</button>
注意,type='reset'
这里不需要...
如果您需要删除多个字段,请查看此方法:
setValues({q: ''})
关于javascript - 清除具有初始值 React 的 Formik 字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58250110/