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 上面的命令使用 命令创建样板文件，其中包含 React 应用程序的所有文件和包。 create-react-app 安装 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 接下来，更改 和 参数。稍后将在初始化联系表单以将其连接到 EmailJS 时使用  。确保单击 和 按钮以确认您的更改。  名称 服务 ID 服务 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 吗？您如何看待我上面的方法？在下面的评论中让我们知道！

Initialized

2022 - HackerNoon Contributor of the Year - Data Visualization

2022 - HackerNoon Contributor of the Year - Frontend

2022 - HackerNoon Contributor of the Year - Heroku

2022 - HackerNoon Contributor of the Year - Javascript

2022 - No No No Nodejs

2022 - Remote Work Warrior

Portfolio

Nominated for 2022 - HackerNoon Contributor of the Year - Data Visualization

Nominated for 2022 - HackerNoon Contributor of the Year - Heroku

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - HackerNoon Contributor of the Year - Frontend

Nominated for 2022 - Remote Work Warrior

Nominated for 2022 - No No No Nodejs

該音頻是用故事的原始語言製作的！

太長; 讀書

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

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

About Author

註釋

標籤

这篇文章刊登在

Related Stories

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

看不见的层面：为什么用户访谈是不可替代的资产

Telegram：加密岛通往大陆的桥梁

比特币 UTXO 模型，为独特的生态系统提供动力

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

看不见的层面：为什么用户访谈是不可替代的资产

Telegram：加密岛通往大陆的桥梁

比特币 UTXO 模型，为独特的生态系统提供动力

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps