将 React Hook Form 与 EmailJs 和 Zod 验证集成

使用 React 和 Validation 解决电子邮件集成问题

JavaScript 和 React 以及 EmailJs 和 Zod

import React from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import * as z from 'zod';
import emailjs from '@emailjs/browser';
const userSchema = z.object({
  name: z.string().min(3).max(50),
  email: z.string().email(),
  message: z.string().min(10).max(500)
});
export function ContactForm() {
  const { register, handleSubmit, formState: { errors }, reset } = useForm({
    resolver: zodResolver(userSchema)
  });
  const onSubmit = data => {
    emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', data, 'YOUR_PUBLIC_KEY')
      .then((result) => console.log(result.text))
      .catch((error) => console.log(error.text));
    reset();
  };
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('name')} placeholder="Name" />
      {errors.name && <span>{errors.name.message}</span>}
      <input {...register('email')} placeholder="Email" />
      {errors.email && <span>{errors.email.message}</span>}
      <textarea {...register('message')} placeholder="Message"></textarea>
      {errors.message && <span>{errors.message.message}</span>}
      <input type="submit" />
    </form>
  );

使用 EmailJs 在表单提交中实现 useRef

React useRef Hook 和 EmailJs 库

import React, { useRef } from 'react';
import emailjs from '@emailjs/browser';
export function ContactUs() {
  const form = useRef();
  const sendEmail = (e) => {
    e.preventDefault();
    emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', form.current, 'YOUR_PUBLIC_KEY')
      .then((result) => console.log(result.text))
      .catch((error) => console.log(error.text));
  };
  return (
    <form ref={form} onSubmit={sendEmail}>
      <label>Name</label>
      <input type="text" name="user_name" />
      <label>Email</label>
      <input type="email" name="user_email" />
      <label>Message</label>
      <textarea name="message"></textarea>
      <input type="submit" value="Send" />
    </form>
  );

有关 React 和电子邮件集成的常见问题解答

1. React Hook Form 能否处理复杂的表单验证场景？
2. 是的，React Hook Form 可以轻松处理复杂的验证场景，特别是与 Zod 或 Yup 等验证模式结合使用时，允许广泛的验证规则和模式。
3. EmailJs 如何与 React 应用程序集成？
4. EmailJs 允许 React 应用程序直接从前端发送电子邮件，而不需要后端服务。只需使用您的服务 ID、模板 ID 和用户令牌配置 EmailJs SDK，您就可以在 React 应用程序中集成电子邮件功能。
5. 在 React 表单中使用 useRef 有什么好处？
6. useRef 可用于直接访问 DOM 元素（例如表单），使您能够在不导致额外渲染的情况下对其进行操作。这对于集成像 EmailJs 这样需要直接引用表单元素的第三方服务特别有用。
7. 使用 EmailJs 直接从 React 应用程序发送电子邮件安全吗？
8. 是的，只要您不在客户端代码中公开敏感密钥或令牌，它就是安全的。 EmailJs 通过需要服务 ID、模板 ID 和用户令牌来安全地处理电子邮件发送，这些可以使用环境变量来保证安全。
9. 你可以将 React Hook Form 与类组件一起使用吗？
10. React Hook Form 旨在使用钩子与功能组件一起使用。要将其与类组件一起使用，您需要将它们重构为功能组件或使用支持类组件的不同表单管理库。