让 React 表单使用 Formik 发送电子邮件

Posted 2023-02-21

【中文标题】让 React 表单使用 Formik 发送电子邮件

【英文标题】：Have React form send an email using Formik

【发布时间】：2021-04-26 14:13:39

【问题描述】：

我正在尝试使用 Formik 创建的表单，Yup 向我发送了一封电子邮件“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>

【参考方案1】：

我认为这是您应该采取的方法：

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

【讨论】：

好吧，所以现在我正在使用 EmailJS api，但是当我单击“发送消息”时，得到“从 submitForm() 捕获到未处理的错误需要 html 表单元素或表单的样式选择器”