如何解决让 React 表单使用 Formik 发送电子邮件
我正在尝试使用 Formik 创建的表单,是的,向我发送一封电子邮件“onSubmit”,但我不确定需要向“onSubmit”函数添加什么才能使其正常工作。或者我是否需要 handleSubmit,如果需要,我会写出来让它给我发送电子邮件?
function Contact(){
return (
<Formik
initialValues={{
name: '',email: '',message: '',}}
validationSchema={Yup.object({
name: Yup.string()
.required('required'),email: Yup.string()
.email('Invalid Email Address')
.required('required'),message: Yup.string()
.min(7,'More details are always helpful.')
.required('required')
})}
onSubmit={(values,{ setSubmitting,resetForm }) => {
setTimeout(() => {
resetForm();
setSubmitting(false);
},3000)
}}
>
{props => (
<Form>
<h4>Shoot me a message here.</h4>
<div className="field half first">
<CustomTextInput label="Name" name="name" type="text" placeholder="Enter Name" />
</div>
<div className="field half">
<CustomTextInput label="Email" name="email" type="email" placeholder="Enter Your Email" />
</div>
<div className="field">
<CustomTextarea label="message" name="message" rows="4" placeholder="Your Message Here" />
</div>
<button type="submit" className="special">{props.isSubmitting ? 'Sending...' : 'Send Message'}</button>
</Form>
)}
</Formik>
解决方法
我认为您应该采用以下方法:
function Contact() {
const sendDataToEmailApi = (values) => {
// call your email api with the values
return true; // to show the send process was successful
};
const handleSubmit = (values,{ setSubmitting,resetForm }) => {
const emailWasSent = sendDataToEmailApi(values);
if (emailWasSent) {
resetForm();
setSubmitting(false);
}
};
const validationSchema = Yup.object({
name: Yup.string().required("Required"),email: Yup.string().email("Invalid Email Address").required("Required"),message: Yup.string()
.min(7,"More details are always helpful.")
.required("Required"),});
return (
<Formik
initialValues={{
name: "",email: "",message: "",}}
validationSchema={validationSchema}
onSubmit={handleSubmit}
>
{/* ... */}
</Formik>
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。