让 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>
  );
}