在 React 中将联系表单与 EmailJS 集成

React 是一个用于为前端应用程序构建用户界面的前端库。此外，React 在制作应用程序时很有帮助，因为它使用可重用的组件。

前端开发人员一直存在的问题是如何在不编写或不了解后端功能的情况下处理来自表单数据的请求。构建后端服务器可能很乏味，并且需要使用第三方服务来完成此任务以减轻编写逻辑的痛苦。

什么是电子邮件JS？

EmailJS 是一项服务，可帮助使用 React、Vue 和 Angular 等客户端应用程序发送电子邮件，在配置和设置期间无需服务器。

在本教程中，您将学习如何将前端库 React 与 EmailJS 连接起来，以便在您的网站或移动应用程序上接收用户消息，而无需从头开始构建。

演示

使用此存储库中的起始代码抢先一步，或创建一个新的 React 应用程序。

先决条件

要完成本教程，您需要具备以下条件：

• Node >= 14.0.0 和 npm >= 5.6安装在本地机器上
• 了解 React 的基础知识
• 一个用于试用该服务的EmailJS 帐户。

入门

构建新项目的第一步是拥有使构建变得轻而易举的开发工具。在您的终端中，运行以下命令：

npx create-react-app react-contact-form-with-emailjs

上面的命令使用create-react-app命令创建样板文件，其中包含 React 应用程序的所有文件和包。

安装 EmailJS

作为依赖项，运行命令将 EmailJS SDK 安装到 React 应用程序中。

npm install @emailjs/browser

运行项目

要运行 React 应用程序，请导航到项目目录并运行带有热重载功能的开发服务器，这反过来会使用开发期间所做的任何更改来更新应用程序。

运行此命令：

 cd react-contact-form-with-emailjs npm start

该应用程序可在http://localhost:3000上访问。

创建联系表

通过联系表格收集和接收用户的回复是网站需要具备的一项重要功能，因为它使您在访问者眼中值得信赖。

所以，让我们创建联系表格。在您的 App.js 文件中，复制并粘贴以下代码：

 // src/App.js import React from 'react' import './App.css'; function App() { return ( <div> <h1>Contact Form</h1> <form className='cf'> <div className='half left cf'> <input type='text' placeholder='Name' name='user_name' /> <input type='email' placeholder='Email address' name='user_email' /> </div> <div className='half right cf'> <textarea name='message' type='text' placeholder='Message'></textarea> </div> <input type='submit' value='Submit' id='input-submit' /> </form> </div> ); } export default App;

样式化联系表

应用程序的用户界面需要对用户来说看起来很漂亮，因此在App.css文件中，复制并粘贴以下代码：

 // src/App.css @import url(https://fonts.googleapis.com/css?family=Merriweather); html, body { background: #f1f1f1; font-family: 'Merriweather', sans-serif; padding: 1em; } h1 { text-align: center; color: #a8a8a8; } form { max-width: 600px; text-align: center; margin: 20px auto; } input, textarea { border: 0; outline: 0; padding: 1em; border-radius: 8px; display: block; width: 100%; margin-top: 1em; font-family: 'Merriweather', sans-serif; resize: none; } #input-submit { color: white; background: #e74c3c; cursor: pointer; } #input-submit:hover { box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.2); } textarea { height: 126px; } .half { float: left; width: 48%; margin-bottom: 1em; } .right { width: 50%; } .left { margin-right: 2%; } @media (max-width: 480px) { .half { width: 100%; float: none; margin-bottom: 0; } } .cf:before, .cf:after { content: ' '; display: table; } .cf:after { clear: both; }

页面应该看起来像这样，一切都做对了：

设置电子邮件JS

随着联系表单页面的完成，没有任何发送消息的功能，让我们设置将表单内容发送到您的电子邮件的服务。

添加电子邮件服务

本节是关于 EmailJS 和您的电子邮件服务器之间的集成。在您的 EmailJS 仪表板上，从“电子邮件服务”选项卡中选择Gmail服务，这应该会打开一个名为config service的新页面。

接下来，更改名称和服务 ID参数。稍后将在初始化联系表单以将其连接到 EmailJS 时使用服务 ID 。确保单击连接帐户和创建服务按钮以确认您的更改。

创建电子邮件模板

当用户从您的网站客户端发送消息时，当您想要在收件箱中包含电子邮件的主题、它将包含的内容以及它的目的地时，电子邮件模板是必不可少的。

在仪表板上，单击电子邮件模板选项卡和创建新模板。

接下来，您必须单击“设置”选项卡并将名称和模板 ID更改为您想要的任何内容。模板ID后面会用到，如下图所示：

回到 Content 选项卡，大括号内的值是动态变量，其值应与联系表单中<form>元素中定义的值相同，例如message 、 user_name和user_email 。

创建环境变量

环境变量.env是一个文件，用于存储您的公钥和您不希望共享的其他值，并且对您来说是私有的。

在项目目录的根目录中，创建一个文件.env并粘贴以下内容：

 // .env REACT_APP_TEMPLATE_ID=TEMPLATE_ID REACT_APP_SERVICE_ID=SERVICE_ID REACT_APP_PUBLIC_KEY=API_PUBLIC_KEY

对于公钥，您可以通过单击“ Account ”选项卡并复制public key部分中显示的值来找到它：

初始化电子邮件JS

在 React 应用程序中，导入已安装的包， @emailjs/browser包。

复制并粘贴以下内容：

 // src/App.js import React from 'react' import emailjs from '@emailjs/browser'; function App() { return ( <div> // form element </div> ); } export default App;

处理表单提交

useRef挂钩处理联系表单提交。

复制并更新App.js文件中的代码：

 // src/App.js import React, { useRef } from 'react'; // imports function App() { const form = useRef(); const sendEmail = (e) => { e.preventDefault(); emailjs .sendForm( process.env.REACT_APP_SERVICE_ID, process.env.REACT_APP_TEMPLATE_ID, form.current, process.env.REACT_APP_PUBLIC_KEY ) .then( (result) => { alert('message sent successfully...'); console.log(result.text); }, (error) => { console.log(error.text); } ); }; return ( <div> <h1>Contact Form</h1> <form className='cf' ref={form} onSubmit={sendEmail}> // div container with input element </form> </div> ); } export default App;

上面的代码中发生了以下情况：

• 使用名为 form 的变量导入并初始化useRef挂钩
• 钩子useRef用作引用并分配给<form>元素
• 在sendEmail函数中，表单具有阻止页面刷新的preventDefault方法
• 尽管如此，在sendEmail函数中，调用sendForm函数并使用service ID 、 template ID 、 ref的form .current属性和public key进行初始化
• .then()方法发生的成功和失败情况的回调函数

现在让我们看看这个项目的结果：

确认邮件

结论

使用 EmailJS 在应用程序的客户端处理数据请求是从联系表单接收响应的绝佳方式。 EmailJS 提供其他功能供您探索，并为您提供强大的体验，而无需构建您的服务器或了解后端开发。它在引擎盖下为您做所有事情。

你以前用过 EmailJS 吗？您如何看待我上面的方法？在下面的评论中让我们知道！