javascript - Formik 清除按钮重置表单
问题描述
我有以下表单代码,重置按钮仅清除添加到现有默认值的任何附加文本:
const initialValues = {
firstName,
lastName,
email: customerEmail,
title: customerTitle,
dob,
}
return (
<Formik
initialValues={initialValues}
onSubmit={data => handleOnSubmit(data)}
>
{formik => (
<Form className="w-full md:w-4/5 lg:w-3/5 mx-auto">
<ThreeColumnFormFieldset>
<Field
id="title"
name="title"
label="Title"
component={Input}
validate={validateRequired}
/>
...
<ButtonsWrapper>
<Button
disabled={!(formik.isValid && formik.dirty)}
type="Submit"
isPrimary
text="update"
/>
<Button
onClick={() => formik.resetForm()}
type="reset"
text="clear all"
/>
</ButtonsWrapper>
...
这应该清除表单输入值。
解决方案
我认为重置为默认值是预期的行为。
您可以通过将参数传递给 resetForm() 来清空所有字段
<Button
onClick={() => formik.resetForm({
values: {
title: '',
},
type="reset"
text="clear all"
/>
推荐阅读
- html - 如何使用 React BootStrap 排列项目
- r - 为什么我收到在此函数中找不到的“对象”?
- c - CS50 模糊过滤器在小测试用例中给出了不正确的输出
- react-native - react native,如何通过另一个视图做出有限的视图?
- python-3.x - python3无法将字符串转换为日期时间对象
- javascript - React:如何在组件内声明路由?
- go - 如何为 Goreleaser 中的每个目标设置 `-ldflags` 值?
- javascript - 检测 Vuetify 电台重选?
- c++ - CMake 项目中的 Makefile 传递
- c++ - 我的基本计算器应用程序中的变量不起作用