如何在reactjs中将表单数据发送到电子邮件

zy1mlcev  于 2022-12-29  发布在  React
关注(0)|答案(2)|浏览(205)

我正在使用react.js制作一个表单,并希望将表单字段数据发送到电子邮件。我尝试了此操作(action=”mailto:example@gmail.com“),但没有任何React。
我尝试操作mailto但什么也没发生.我想看到所有字段数据在我的邮件上

kmbjn2e3

kmbjn2e31#

一种方法是手动追加所有表单数据属性,然后像这样打开电子邮件应用程序

window.open("mailto:example@gmail.com?subject=Example Subject&body=all attributes here")

您可以使用反勾号而不是双引号来轻松添加属性,例如

`name: ${data.name}`
eufgjt7s

eufgjt7s2#

使用emailjs简单方法:
1.首次签约
1.然后添加服务(保留服务id)
1.创建电子邮件模板(保留模板id)
1.转到帐户并保留公钥
1.转到您的代码:
1.创建一个电子邮件表单组件,下面是一个示例:

import { useRef } from "react";
import emailjs from "@emailjs/browser";

const MailForm = () => {
  const form = useRef();
  const sendData = (e) => {
    e.preventDefault();

    emailjs
      .sendForm(
        "service_id",
        "template_id",
        form.current,
        "public key "
      )
      .then(
        (result) => {
          console.log(result.text);
        },
        (error) => {
          console.log(error.text);
        }
      );
  };

  return (
    <form ref={form} onSubmit={(e) => sendData(e)}>
      FirstName:
      <input type="text" name="FirstName" />
      Email:
      <input type="text" name="Email" />
      <input type="submit" name="submit" value="Submit" />
    </form>
  );
};
export default MailForm;

1.在emailjs中sendDate函数内插入服务ID、模板ID和公钥
注意:最好先将表单发送到后端服务器,然后再从服务器发送电子邮件

相关问题