Блог

Я создаю контактную форму с помощью React и formik. Я хочу использовать электронную почту.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();
        }}
      >
 

У вас есть 2 варианта отправки электронных писем с помощью emailjs:

• emailjs.send()
• emailjs.sendForm()

Вот пример:

 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 amp;amp; 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() его, вам потребуется использовать event.target вашу HTML-форму.

Это то, что я могу предположить, поскольку вы не показываете, как вы importing emailjs работаете, и не показываете, какую функцию вы используете и как.

Приветствия