如何从我的 React Web 应用程序发送电子邮件

Question

我的应用程序中有一个电子邮件输入字段和一个按钮。一旦我输入电子邮件并单击发送，我想发送一封电子邮件，其中包含输入中输入的值。我知道它不能在 Reactjs 中完成，因为它是一个前端。我能怎么做？有人可以帮忙吗？

原文由 Rakesh Rajan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以从前端客户端向 SMTP 服务器发送请求，该服务器将发送电子邮件。

本教程 介绍了如何使用 emailJS SMTP 服务器（它允许您每月发送 200 封免费电子邮件，以防免费优先）。

我会总结一下，因为它们没有涵盖我想要的一切。

---

第一步：安装emailJS

通过安装emailJS

 npm install emailjs-com

要么

yarn add emailjs-com

资源

如果您使用的是 create-react-app，请查看我上面提到的教程或此链接源，其中提供了有关如何将 emailJS 包含在 create-react-app 中的说明

第 2 步：创建用于发送电子邮件的表单

这是使用 emailJS 发送电子邮件的表单的代码示例，您必须将 'YOUR_SERVICE_ID' 、 'YOUR_TEMPLATE_ID' 和 'YOUR_USER_ID' 为您的 id-s(在后面的步骤中解释在哪里可以找到）

 import React from 'react';
import emailjs from 'emailjs-com';

export default function ContactUs() {

  function sendEmail(e) {
    e.preventDefault();    //This is important, i'm not sure why, but the email won't send without it

    emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', e.target, 'YOUR_USER_ID')
      .then((result) => {
          window.location.reload()  //This is if you still want the page to reload (since e.preventDefault() cancelled that behavior)
      }, (error) => {
          console.log(error.text);
      });
  }

  return (
    <form className="contact-form" onSubmit={sendEmail}>
      <input type="hidden" name="contact_number" />
      <label>Name</label>
      <input type="text" name="from_name" />
      <label>Email</label>
      <input type="email" name="from_email" />
      <label>Subject</label>
      <input type="text" name="subject" />
      <label>Message</label>
      <textarea name="html_message" />
      <input type="submit" value="Send" />
    </form>
  );
}

来源（我做了一些调整）

• 如果您不希望您的 api 详细信息从客户端可见，您必须向后端服务器（将设置并运行以接收请求）通过类似 axios 或 fetch 然后从你的服务器执行 sendEmail 函数

第 3 步：创建一个 emailJS 帐户

在 https://www.emailjs.com/ 上设置一个帐户

第 4 步：将电子邮件帐户连接到 emailJS 并获取 YOUR_SERVICE_ID

通过添加服务来连接电子邮件，在本例中我使用的是 gmail。

‘YOUR_SERVICE_ID’ （第 2 步）应该是旁边的 id Service ID

第 5 步：创建模板电子邮件并获取 YOUR_TEMPLATE_ID

通过单击侧导航中的电子邮件模板并选择创建新模板来创建模板。这将创建一个电子邮件大纲并为您提供一个模板 ID

您应该用此模板 ID 替换 “YOUR_TEMPLATE_ID” （第 2 步）

这是一个示例电子邮件模板

第 6 步：获取 YOUR_USER_ID

您可以通过转到 Integration -> API 找到您的用户 ID

将 “YOUR_USER_ID” （第 2 步）替换为 API Keys -> Public Key 下的 ID

---

• 如果您不想收到垃圾邮件， 请添加验证码
• 如果您更改电子邮件密码，则必须重做第 4 步

原文由 Sam 发布，翻译遵循 CC BY-SA 4.0 许可协议