Блог

у меня есть одно поле ввода электронной почты и кнопка в моем приложении. как только я ввожу электронное письмо и нажимаю отправить, я хотел бы отправить электронное письмо со значением, введенным при вводе. я знаю, что это невозможно сделать в Reactjs, потому что это интерфейс. Как я могу это сделать? кто-нибудь может помочь?

Из клиентского интерфейса вы можете отправить запрос на SMTP-сервер, который отправит электронное письмо.

В этом руководстве рассказывается о том, как это сделать с помощью SMTP-сервера emailJS (который позволяет отправлять 200 бесплатных электронных писем в месяц, если приоритетом является free).

Я подведу итог, потому что они не охватили все, что я хотел.

Шаг 1: установите 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' своими фактическими идентификаторами (которые я объясню, где найти на последующих шагах)

 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 были видны клиенту, вам нужно будет отправить запрос (содержащий сообщение электронной почты, from, to и т. Д.) На внутренний сервер (который будет настроен и запущен для приема запросов) через что-то вроде axios или fetch , а затем выполнить sendEmail функциюс вашего сервера

Шаг 3: Создайте учетную запись emailJS

Создайте учетную запись на https://www.emailjs.com /

Шаг 4: подключите учетную запись электронной почты к emailJS и получите YOUR_SERVICE_ID

Подключите электронную почту, добавив службу, в данном случае я использовал gmail.

‘YOUR_SERVICE_ID’ (шаг 2) должен быть идентификатором рядом Service ID

Шаг 5: Создайте шаблон сообщения электронной почты и получите YOUR_TEMPLATE_ID

Создайте шаблон, щелкнув Шаблоны электронной почты в боковой панели навигации и выбрав создать новый шаблон. Это создаст схему электронной почты и предоставит вам идентификатор шаблона

Вы должны заменить ‘YOUR_TEMPLATE_ID’ (шаг 2) на этот идентификатор шаблона

Вот пример шаблона электронной почты

Шаг 6: Получите YOUR_USER_ID

Вы можете найти свой идентификатор пользователя, перейдя в раздел Интеграция -> API

Замените ‘YOUR_USER_ID’ (шаг 2) идентификатором в разделе Ключи API -> Открытый ключ

• Если вы не хотите получать спам-письма, добавьте Captcha
• если вы измените свой пароль электронной почты, вам придется повторить шаг 4

Только из интерфейса вы можете запускать сообщения, используя smtp-сервер, такой как smtpJS

Шаги, которым нужно следовать, это

1. Перейдите по этой ссылке smtpJS
2. Нажмите GetSMTPCredentials и зарегистрируйтесь.
3. После регистрации запишите учетные данные и нажмите ENCRYPTSMTPCrendentials

Пример будет следующим

 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 amp;amp; t(e) }, a.send(n) }, ajax: function (e, n) { var t = Email.createCORSRequest("GET", e); t.onload = function () { var e = t.responseText; null != n amp;amp; 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, // to include multiple emails you need to mention an array
        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");
  

React используется только для интерфейсных целей, поэтому его недостаточно только для отправки электронной почты.

Но вы можете отправлять электронную почту с клиента, используя некоторые внешние API, такие как Mailjet, Gmail Api и т. Д

Посмотрите, как настроить электронную почту без серверной части

это удобнее и дает вам полный контроль