如何使用 EmailJs (React) 自定义电子邮件接收电子邮件？答案

【问题标题】：How to receive emails with EmailJs (React) custom email?如何使用 EmailJs (React) 自定义电子邮件接收电子邮件？
【发布时间】：2022-12-07 19:57:16
【问题描述】：

在网站上，用户填写一个表格，其中包含姓名、电话和电子邮件。如何使用 EmailJs 从用户在表单中指定的地址发送电子邮件？在文档中没有关于它的信息。

【问题讨论】：

标签： reactjs sendmail

【解决方案1】：

您可以使用 EmailJS send 方法在表单中捕获用户的姓名、电话号码和电子邮件地址，并使用此信息发送电子邮件：

import * as EmailJS from 'emailjs-com';
import * as React from 'react';

// Initialize EmailJS
EmailJS.init('YOUR-USER-ID');

const App = () => {
  // State to hold the user's name, phone number, and email address
  const [senderName, setSenderName] = React.useState('');
  const [senderPhone, setSenderPhone] = React.useState('');
  const [senderEmail, setSenderEmail] = React.useState('');

  // Handle the form submit event
  const handleSubmit = (event) => {
    event.preventDefault();

    // Send the email using the EmailJS send method
    EmailJS.send('YOUR-SERVICE-ID', 'YOUR-TEMPLATE-ID', {
      senderName,
      senderPhone,
      senderEmail,
      recipientEmail: 'recipient@example.com',
      emailBody: 'Hello, this is an email from EmailJS',
    });
  }

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="sender-name">Sender's name:</label>
      <input
        id="sender-name"
        type="text"
        value={senderName}
        onChange={(event) => setSenderName(event.target.value)}
      />
      <label htmlFor="sender-phone">Sender's phone number:</label>
      <input
        id="sender-phone"
        type="text"
        value={senderPhone}
        onChange={(event) => setSenderPhone(event.target.value)}
      />
      <label htmlFor="sender-email">Sender's email address:</label>
      <input
        id="sender-email"
        type="email"
        value={senderEmail}
        onChange={(event) => setSenderEmail(event.target.value)}
      />
      <button type="submit">Send email</button>
    </form>
  );
};

EmailJS 库中的发送方法从用户在 senderEmail 状态变量中指定的地址发送电子邮件。用户的姓名和电话号码也包含在电子邮件中，方法是将它们作为附加参数传递给发送方法。

您需要将 YOUR-USER-ID、YOUR-SERVICE-ID 和 YOUR-TEMPLATE-ID 替换为适合您的 EmailJS 帐户的值。您可以在 EmailJS 仪表板的“服务”和“模板”部分下找到这些值。

【讨论】：