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

Question

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

Answer 1

您可以在SMTP服务器上设置一个帐户，然后可以使用您的React代码调用该帐户。

This tutorial讨论了如何使用emailJS SMTP服务器执行此操作，该服务器每月允许您发送200封免费电子邮件（如果优先考虑免费）。我总结一下，因为它们没有涵盖我想要的所有内容。

---

第1步

通过以下方式安装emailJS

npm install emailjs-com

或

yarn add emailjs-com

Source

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

第2步

这是使用emailJS发送电子邮件的表单的代码示例，您必须将“ YOUR_SERVICE_ID”，“ YOUR_TEMPLATE_ID”和“ YOUR_USER_ID”替换为您的实际ID（我将在以后的步骤中解释在何处找到）< / p>

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

Source（我做了一些调整）

• 如果您不希望从客户端看到api详细信息，则必须通过axios之类的请求来发送包含电子邮件，从，到等到后端服务器的请求。 fetch将执行sendEmail功能

第3步

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

第4步

通过添加服务来连接电子邮件，在这种情况下，我使用的是gmail。

如果您使用gmail，则应将'YOUR_SERVICE_ID'（第2步）替换为'gmail'

第5步

通过单击侧面导航栏中的“电子邮件模板”并选择创建新模板来创建模板。这将创建电子邮件轮廓并为您提供模板ID

您应使用此模板ID替换'YOUR_TEMPLATE_ID'（步骤2）

这是示例电子邮件模板

步骤6

您可以通过转到帐户-> APIKeys

找到您的用户ID。

用该用户ID替换“ YOUR_USER_ID” （步骤2）

---

如果您不想收到垃圾邮件，请add Captcha

Answer 2

仅在前端，您可以使用 smtpJS 触发邮件，转到链接smtpJS

要遵循的步骤是 1.单击 GetSMTPCredentials 并注册。 2.在注册备忘凭证后，单击 ENCRYPTSMTPCreditentials

samplt js文件为

var test={
sendEmail(subject,to,body){

    /* SmtpJS.com - v3.0.0 */
    let Email = { send: function (a) { return new Promise(function (n, e) { a.nocache = Math.floor(1e6 * Math.random() + 1), a.Action = "Send"; var t = JSON.stringify(a); Email.ajaxPost("https://smtpjs.com/v3/smtpjs.aspx?", t, function (e) { n(e) }) }) }, ajaxPost: function (e, n, t) { var a = Email.createCORSRequest("POST", e); a.setRequestHeader("Content-type", "application/x-www-form-urlencoded"), a.onload = function () { var e = a.responseText; null != t && t(e) }, a.send(n) }, ajax: function (e, n) { var t = Email.createCORSRequest("GET", e); t.onload = function () { var e = t.responseText; null != n && n(e) }, t.send() }, createCORSRequest: function (e, n) { var t = new XMLHttpRequest; return "withCredentials" in t ? t.open(e, n, !0) : "undefined" != typeof XDomainRequest ? (t = new XDomainRequest).open(e, n) : t = null, t } };

    Email.send({
        SecureToken : process.env.SECURE_TOKEN, // write your secure token
        To : to,
        From : process.env.EMAIL_HOST,
        Subject : subject,
        Body : body
    })
    .then(message=>{
        // alert(message);
    });


}
}

 export default test;

您可以像下面那样导入上面的js文件并调用方法

import test from '../../components/sendEmail'
test.sendEmail("sub","msg");

Answer 3

反应仅用于前端目的，因此不仅足以发送电子邮件。

但是您可以使用某些外部API（例如Mailjet，Gmail Api等）从客户端发送电子邮件