我在 React-hook-form 和 EmailJS 中创建了一个简单的表单，可以轻松发送电子邮件

总结

我在开发个人的QuickURL时，考虑到尽可能简单地获得反馈意见，我设计了一个反馈表单，用户只需在文本区域输入并发送，我的邮件就会收到这段文字。✨

这次我们将使用React-hook-form和EmailJS。

由于我自己也是一个初学者，所以我尽量以简单易懂的方式来写了?。只要按顺序阅读，您应该能理解如何使用！

使用 React-hook-form 创建表单。

在使用React-hook-form创建输入表单并使用EmailJS创建发送功能时，首先使用React-hook-form编写表单。

做好准备/准备好

// npmの場合
npm install react-hook-form

// yarnの場合
yarn add react-hook-form

最初要安装react-hook-form…

import { useForm } from "react-hook-form";
..............................................
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

请按照这样的顺序进行基本的导入操作，随后我们将开始制作表格。

---

我试着亲自写一下。

在React-hook-form中，基本的写法类似于原始的HTML代码，然后我们再添加验证和错误处理的部分。
这次我们只需要创建一个文本区域和一个按钮，用于简单的反馈。

首先，仅使用简单的HTML页面将如下所示的内容重新表达：

<form>
   <textarea />
   <input type="submit" />
</form>

如果在React-hook-form中添加设置，会像这样↓

<form onSubmit={handleSubmit((data) => console.log(data))}> ←-1つ目の追記ポイント!
   <textarea {...register("feedback", { required: true })} /> ←-2つ目の追記ポイント!
   {errors.feedback && <p>文字を入力してください</p>} ←-3つ目の追記ポイント!
   <input type="submit" />
</form>

我会按照第二个、第一个、第三个的顺序解释追加要点，以便更容易理解说明。

---

关于文本区域（textarea）中的{register….}部分?

<form onSubmit={handleSubmit((data) => console.log(data))}>

这段代码设置了输入表单的“名称”和“验证”。

在register函数中，将name参数设为string类型并将validation参数设为object类型。在上述示例中，只设置了一个required项目，但实际上有各种不同的设置可供选择。

register是一个表示注册的词汇，它意味着将每个表单注册到React-hook-form中，以便能够理解。

关于onSubmit部分的内容?

<textarea {...register("feedback", { required: true })} />

这个功能是通过React-hook-form提供的函数handleSubmit在发送时执行。(该函数只有在所有表单都符合上述指定的register条件时才会执行)

引数的data是一个对象，其中存储了每个输入表单的名称和输入的文字内容。
{ feedback, “输入的文字内容在这里” }

在这部分中，只是通过console.log(data)将数据显示在控制台上，但实际上会执行发送数据等处理。

关于写着{错误…}的部分?

{errors.feedback && <p>文字を入力してください</p>}

通過將表單的名稱填寫在「errors.〇〇〇」的〇〇〇部分，可以在提交時獲取表單根據register註冊的條件是否符合的布爾值。

因此，在上述例子中，我们将”required”设为true以确定feedback的必填性。如果没有输入文字而直接提交，那么”请填写此字段”的提示消息将显示。

请键入文字

只是将{}作为处理方法写出来而已，所以实际上在文件的任何地方写都没有问题。

表格已填写完成

使用React-hook-form，我们已经完成了表单的创建！如果您想实现表单验证等功能，此时已经足够了。

如果您想要在此处输入的内容能够发送到电子邮件，请继续查看以下EmailJS部分。

使用EmailJS创建电子邮件发送功能。

以下是关于EmailJS的使用方法的总结。
虽然已经有很多关于EmailJS的详细解释的文章，但这次我们将解释如何与React-hook-form进行互动来创建发送功能的方法。

不用担心，这比以前的React-hook-form设置要简单得多！

首先需要注册和准备EmailJS。

创建服务

创建模板

重要的是{{message}}的部分！你需要确保这部分与使用react-hook-form设置的数据名称相匹配。

数据名称指的是在register函数的第一个参数中注册的部分，所以在本例中，它将是“反馈”

<Textarea{...register("feedback", { required: true })}/> //この「feedback」の部分

---

在这一点上，EmailJS的工作已经完成。

将ID添加到环境变量中。

由于创建了服务（Service）和模板（Template），可以使用ServiceID和TemplateID。我们将使用这些ID与公共密钥（Public Key）一起创建发送功能的三个ID。

由于ServiceID和TemplateID都是以直观易懂的方式书写的，所以您应该可以很快找到它们。
公钥写在名为Account的部分的最顶部。

如果能够找到这三个ID，就将其实际写入代码中，但由于这些ID应该保密，所以不应直接写在src内。

因此，创建.env文件并将其用作环境变量。

---

接下来，我们将实际添加到环境变量中。
虽然从这里开始的步骤看起来似乎很复杂，但实际上非常简单。

创建.env文件

请在项目的根目录下创建一个名为「.env」的文件。然后将ID按以下方式存储在该文件中。

REACT_APP_EMAILJS_SERVICE_ID=ここにServiceID
REACT_APP_EMAILJS_TEMPLATE_ID=ここにTemplateID
REACT_APP_EMAILJS_PUBLIC_ID=ここにPublicKey

在输入ID时，不需要写上引号等字符，没关系的！

需要将其添加到.gitignore文件中。

我之前已经说过，这个ID不应该被别人看到，如果上传到GitHub，将会造成麻烦。

所以请在.gitignore文件中添加字符”.env”。

////////
.env.test.local
.env.production.local
.env //←これを追加するだけです！！！！

npm-debug.log*
yarn-debug.log*
////////

通过这个操作，环境变量的添加已经完成了！

React Hook Form与EmailJS的整合

现在，每个工具的准备工作已经完成了，剩下的工作流程已经完成了80%。

让我们将这两个工具进行组合，以便能够接收电子邮件！

创建一个用于发送邮件的函数

需要创建一个在提交时的函数，以便在实际提交表单时能将内容发送到EmailJS。

在react-hook-form中，我们使用名为handleSubmit的预定义函数来处理提交时输入的信息。这个函数的参数是实际的函数，我们将在之后进行编写。
（后续将解释为何采用这种形式）

这次我们将把它命名为submitMail的函数。

const submitMail = () => {} // ←-追記ポイント

<form onSubmit={handleSubmit(submitMail)}> // ←-追記ポイント
   <textarea {...register("feedback", { required: true })} />
   {errors.feedback && <p>文字を入力してください</p>}
   <input type="submit" />
</form>

我們將從下一個部分開始撰寫函數的內容。

接收环境变量

如上所述，要使用EmailJS发送电子邮件，您需要三个ID。
请使用在前一个部分中设置的环境ID。

const submitMail = () => {
    const serviceId = process.env.REACT_APP_EMAILJS_SERVICE_ID;
    const templateId = process.env.REACT_APP_EMAILJS_TEMPLATE_ID;
    const publicId = process.env.REACT_APP_EMAILJS_PUBLIC_ID;
}

通过这样做，我们可以定义三个ID。

这个函数的参数

在 `react-hook-form` 中，使用 `handleSubmit` 函数的参数作为执行的函数会接收输入表单的数据作为参数传递进来。

换句话说，submitMail函数可以接收输入数据对象作为参数。这就是使用handleSubmit函数的原因。

这个例子中，我们会通过参数接收到以下的对象。

{feedback: 'ここに入力された文字'}

因为在register中将名称设定为feedback，所以此数据的属性也是反馈。

终于发送了邮件。

现在，我们已经准备好了”为了确定发送目标的ID”和”获取要发送的内容”，所以我们可以开始编写发送邮件的逻辑了！

要将信息发送到EmailJS，需要使用emaijs.send()函数。
该函数需要传入4个参数，并需要按照以下方式进行设置。

emailjs.send(serviceId, templateId, 'ここにメールのデータ', public_Id);

根据这些内容，实际的电子邮件发送代码如下：

  const submitMail = async (data) => {
    const serviceId = process.env.REACT_APP_EMAILJS_SERVICE_ID; //ServeceIDを取得
    const templateId = process.env.REACT_APP_EMAILJS_TEMPLATE_ID;// TemplateIDを取得
    const publicId = process.env.REACT_APP_EMAILJS_PUBLIC_ID; // Public Keyを取得
    
      try {
        await emailjs.send(serviceId, templateId, data, publicId);
      } catch (error) {
      console.error("エラーが出ました" + error)
      }
    }
  };

这段代码非常简单，使用了一个try-catch语句块。基本上意思是，“尝试发送，如果失败则执行catch中的处理”。

在重要的发送部分，通过三个ID指定了发送目标，并将数据部分存储在参数”data”中。

总结

这个流程相当复杂。辛苦了！这是我第一次写这么多技术文章，如果有让人难懂的地方，真的很抱歉。

由于我努力追求开发为大量用户提供服务的个人目标，所以我很高兴任何能够支持我的人能够检查我的Twitter或QuickURL！

谢谢你☆ nǐ)