javascript - 如何在 Formik 表单上使用动作?
问题描述
我想在每次提交表单时重置我的 Formik 表单。而不是submitForm(email);
我试图submitForm(actions, email)
让我能够打电话
actions.resetForm()
在里面submitForm()
,但我明白了Cannot find name 'actions'.ts(2304)
let submitForm = (email: string) => {
setIsSubmitted(true);
removeUser({
variables: {
email: email,
},
})
.then(({ data }: ExecutionResult<DeleteUserResponse>) => {
setIsRemoved(true);
})
.catch((error: { message: string }) => {
setIsRemoved(false);
});
};
return (
<div>
<Formik
initialValues={{ email: '' }}
onSubmit={(values, actions) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
actions.setSubmitting(false);
}, 1000);
}}
validationSchema={schema}>
{props => {
const {
values: { email },
errors,
touched,
handleChange,
isValid,
setFieldTouched,
} = props;
const change = (name: string, e: FormEvent) => {
e.persist();
handleChange(e);
setFieldTouched(name, true, false);
};
return (
<div className="main-content">
<form
style={{ width: '100%' }}
onSubmit={e => {
e.preventDefault();
submitForm(email);
}}>
<div>
<TextField
variant="outlined"
margin="normal"
id="email"
name="email"
helperText={touched.email ? errors.email : ''}
error={touched.email && Boolean(errors.email)}
label="Email"
value={email}
onChange={change.bind(null, 'email')}
/>
<br></br>
<CustomButton
disabled={!isValid || !email}
text={'Remove User'}
/>
</div>
</form>
</div>
);
}}
</Formik>
</div>
);
或者,如果有更简单的方法来重置文本字段,那也很好。
解决方案
改变
onSubmit={e => {
e.preventDefault();
submitForm(email);
}}>
至
onSubmit={e => {
e.stopPropagation()
handleSubmit(e)
}}>
添加handleSubmit事件
const {
values: { email },
errors,
touched,
handleChange,
isValid,
setFieldTouched,
handleSubmit <-- this
} = props;
在 onSubmit
onSubmit={(values, actions) =>
添加功能
submitForm(values.email);
注意:onsubmit 是一个属性,<Formik onSubmit={...
您可以获取此函数上的所有值,而不是从中获取<form onSubmit
推荐阅读
- jquery - 使用 jQuery 检测表中是否有给定的显示属性
- git - 使用 git reset - 它是否删除提交 - 希望节省磁盘空间
- r - R中的最佳内存使用
- reactjs - 解析保存在会话存储中的对象
- python - Pandas - 在列中总结一对中的每个成员
- spring - Spring Security Failurehandler 中的自定义登录表单 Bean
- c# - c# 类从基类继承,带有依赖注入的构造函数
- c - C - 链表 - 如何分配和遍历列表
- python - python pandas set_index() 和 unstack 结果在 hive 中带有下划线的列,但 pivot_table() 有效
- ruby - 如何返回整个数组而不是单个字符串