[英]How to use actions on Formik forms?
我想在每次提交表单时重置我的 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) =>
添加function
submitForm(values.email);
注意:onsubmit 是<Formik onSubmit={...
的一个属性,您可以获取此 function 上的所有值,而不是从<form onSubmit
<Formik
initialValues={{ email: '' }}
onSubmit={(values, actions) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
actions.setSubmitting(false);
}, 1000);
**actions.resetForm();**
}}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.