ReactJs formik 和 EmailJs 集成答案

【问题标题】：ReactJs formik and EmailJs integrationReactJs formik 和 EmailJs 集成
【发布时间】：2021-06-02 18:29:07
【问题描述】：

我正在使用 React 和 formik 构建一个联系表单。我想使用 Email.Js，它允许我通过电子邮件超级轻松地发送电子邮件/联系表的详细信息。但是，实际上并没有任何关于集成 formik 和 EmailJs 的文档。如果有人将这些技术一起使用过，如果您能提供任何建议，那就太好了。这是我的代码，这就是我想要做的。我对 React 还是有点陌生，所以如果我做错了什么，请告诉我......

这是一种非形式化的做事方式。只需传递 onSubmit 并调用该函数。

<form className="contact-form" onSubmit={sendEmail}>

这是与我的 formik 表单相关的代码，然后是我的 onSubmit formkik 属性。我不知道我需要在哪里传递 sendEmail() 函数。我无法正常工作，并且收到了各种错误/警告，例如“从 submitForm() 捕获到未处理的错误，需要 HTML 表单元素或表单的样式选择器”

 <div className="buy-form-cont">
      <Formik
        initialValues={{
          name: "",
          email: "",
          powerWashed: false,
          options: "",
          info: "",
        }}
        validationSchema={validationSchema}
        onSubmit={(values, { setSubmitting, resetForm,}) => {
          sendEmail(values)
          console.log("submit", values);
         
       
          alert(
            "Thank you for the submission. Korionna will be in contact with you shortly"
          );
          setSubmitting(false);
          resetForm();
        }}
      >

【问题讨论】：

标签： reactjs formik

【解决方案1】：

您有 2 个选项可以使用 emailjs 发送电子邮件：

这是一个例子：

import {Formik, Field, Form} from 'formik';
import emailjs, {send} from 'emailjs-com'


export default function ContactForms() {
    
    function SendEmail(object) {
        emailjs.send("serviceID", "templadeID", object,"userID" )
            .then((result) => {
                console.log(result.text)
            }, (error) => {
                console.log(error.text)
            })
    }
    
      return (

            <Formik
          initialValues={{ name: "" }}
          onSubmit={(values, actions) => {
            setTimeout(() => {
              SendEmail(values)
              actions.setSubmitting(false)
            }, 1000)
          }}
        >
          {(props) => (
            <Form>
              <Grid templateColumns="repeat(2, 1fr)" gap="4">
                <Field name="name" validate={validateName}>
                    {({ field, form }) => (
                        <Box>
                            <FormControl isInvalid={form.errors.name && form.touched.name}>
                                <FormLabel htmlFor="name">First name</FormLabel>
                                <Input {...field} id="name" placeholder="name" />
                                <FormErrorMessage>{form.errors.name}</FormErrorMessage>
                            </FormControl>
                        </Box>
                    )}
                </Field>
              <Button
                mt={4}
                colorScheme="teal"
                isLoading={props.isSubmitting}
                type="submit"
              >
                Submit
              </Button>
            </Form>
          )}
        </Formik>
      )
  }

忽略样式：P

如果您想使用 formik 发送，formik 会返回一个对象，您需要使用它接受对象的emailjs.send()。如果您使用emailjs.sendForm()，则需要您使用html 表单的event.target。

这是我能猜到的，因为你没有显示你好吗 importing emailjs 也没有显示你正在使用哪个功能以及如何使用。

干杯

【讨论】：