如何在 React (EmailJS) 中通过表单发送电子邮件

简介

这篇文章将指导您使用 ReactJS（带钩子）创建表单和功能，以便发送电子邮件。我们将使用名为EmailJS的第三方服务。

EmailJS 简介

仅使用客户端技术发送电子邮件。无需服务器。

选择一种受支持的电子邮件服务
创建电子邮件模板
使用 JS 库触发电子邮件

设置 EmailJS

让我们首先创建一个免费帐户。
现在，我们将执行介绍中的第一步：我们将选择 Gmail 作为我们的电子邮件服务。

在“电子邮件服务”选项卡上，点击“添加新服务”按钮后，您应该会看到类似上图所示的内容。点击 Gmail（本例中我们将使用 Gmail）。要将该服务与您的 Gmail 帐户连接，请点击“连接帐户”按钮。另外，请记住您的服务 ID，因为我们稍后会用到它。最后，点击“创建服务”，并检查您的收件箱，看看您是否收到了测试邮件。收到了吗？太棒了！

在简介的第二步中，我们来创建一个模板。现在就开始吧。前往侧面菜单上的“电子邮件模板”选项卡，然后点击“创建新模板”按钮。出于测试目的，我们将使用默认模板。需要注意的是，双花括号中的变量是动态变量，它们将被替换为我们在方法（在本例中为 React 方法）中提供的数据emailjs.send。点击“保存”，就可以继续了。

恭喜，第一部分完成！🥳

反应

我假设你已经知道如何创建 React 应用了。如果没有，可以看看这个。

让我们安装 emailjs 包。
npm i emailjs-com

现在，我们导入它（获取用户 ID）。

import './App.css';
import { useState } from 'react';
import { send } from 'emailjs-com';

function App() {
  return (
    <div className="App">
      ...
    </div>
  );
}

export default App;

现在让我们在 div.App 中创建表单

<form onSubmit={onSubmit}>
  <input
    type='text'
    name='from_name'
    placeholder='from name'
    value={toSend.from_name}
    onChange={handleChange}
  />
  <input
    type='text'
    name='to_name'
    placeholder='to name'
    value={toSend.to_name}
    onChange={handleChange}
  />
  <input
    type='text'
    name='message'
    placeholder='Your message'
    value={toSend.message}
    onChange={handleChange}
  />
  <input
    type='text'
    name='reply_to'
    placeholder='Your email'
    value={toSend.reply_to}
    onChange={handleChange}
  />
  <button type='submit'>Submit<button/>
</form>

太棒了，我们继续。现在，你的 App 组件应该如下所示：

...

function App() {
  const [toSend, setToSend] = useState({
    from_name: '',
    to_name: '',
    message: '',
    reply_to: '',
  });

  const onSubmit = (e) => {
    e.preventDefault();
    {/* --- METHOD TO SEND THE MAIL --- */}
  };

  const handleChange = (e) => {
    setToSend({ ...toSend, [e.target.name]: e.target.value });
  };

  return (
    <div className='App'>
      {/* --- FORM --- */}
    </div>
  );
}
export default App;

瞧，我们使用了useState()Hook，它允许你将 React 状态添加到函数组件中。我们使用“toSend”对象初始化了状态，其实例名称与 emailjs 模板中的动态实例名称相同。我们还创建了两个用于操作表单数据的方法：handleChange更新状态和onSubmit处理提交；通过emailjs.send我们即将实现的方法发送数据。

onSubmit看起来应该是这样的：

const onSubmit = (e) => {
    e.preventDefault();
    send(
      'SERVICE ID',
      'TEMPLATE ID',
      toSend,
      'User ID'
    )
      .then((response) => {
        console.log('SUCCESS!', response.status, response.text);
      })
      .catch((err) => {
        console.log('FAILED...', err);
      });
  };

send请在您可以在 emailjs 仪表板上找到的方法中添加所需的唯一 ID 。

好吧，没什么...

运行该应用程序（npm start）。
填写表单并点击“提交”。
查看你的 Gmail 收件箱。
明白了吗？

恭喜！你太棒了！🥳🎊

希望我的第一篇文章对你有帮助！任何反馈都非常感谢！

谢谢！
达利博尔

鏂囩珷鏉ユ簮锛�https://dev.to/daliboru/how-to-send-emails-from-a-form-in-react-emailjs-27d1