没有使用 React Hook Form 和 EmailJS 的数据

Posted 2023-02-18

【中文标题】没有使用 React Hook Form 和 EmailJS 的数据

【英文标题】：No data available using React Hook Form and EmailJS

【发布时间】：2021-12-28 22:54:24

【问题描述】：

我正在尝试使用此解决方案：TypeError: e.preventDefault is not a function on React Hook Form using EmailJs，但我遇到了另一个错误。即使使用相同的代码。 EmailJS 最近有什么变化吗？

错误：第三个参数应该是 html 表单元素

有人可以帮帮我吗？这让我发疯了。

编辑：这个解决方案对我有用。

发送电子邮件功能：

const sendEmail = (formData, e) => 
  // Send email
  emailjs.sendForm("YOUR_SERVICE_ID", "YOUR_TEMPLATE_ID", e.target, "YOUR_USER_ID")
    .then((result) => 
        console.log(result.text);
    , (error) => 
        console.log(error.text);
    );
    reset();
;

和我的表单（使用样式组件）：

                <Form onSubmit=handleSubmit(sendEmail)>
                    <FormH1>Register your information</FormH1>
                    <FormLabel>Name</FormLabel>
                    <FormInput
                        ...register("name", 
                        required: true,
                        maxLength: 20,
                        pattern: /^[A-Za-z]+$/i
                    ) type="text" name="name"/>
                        errors?.name?.type === "required" && <FormError>This field is required</FormError>
                        errors?.name?.type === "maxLength" && <FormError>First name cannot exceed 20 characters</FormError>
                        errors?.name?.type === "pattern" && <FormError>Alphabetical characters only</FormError>
                    <FormLabel>Email</FormLabel>
                    <FormInput
                        ...register("email", 
                        required: true,
                        pattern: /\S+@\S+\.\S+/
                    ) type="email" name="email"/>
                        errors?.email?.type === "required" && <FormError>This field is required</FormError>
                        errors?.email?.type === "pattern" && <FormError>Entered value does not match email format</FormError>
                    <FormLabel>ORCID</FormLabel>
                    <FormInput ...register("orcid",  
                        required: true,
                        minLength: 16, 
                        maxLength: 16,
                        pattern: /^[0-9\b]+$/
                    ) type="number" name="orcid"/>
                        errors?.orcid?.type === "required" && <FormError>This field is required</FormError>
                        errors?.orcid?.type === "minLength" && <FormError>It must be a number of 16 digits</FormError> 
                        errors?.orcid?.type === "maxLength" && <FormError>It must be a number of 16 digits</FormError> 
                        errors?.orcid?.type === "pattern" && <FormError>Numerical characters only</FormError> 
                    <FormButton type="submit"/>
                </Form>

【问题讨论】：

您的

@VidarshanAdithya 哦...是的。好吧，我正在使用自定义标签来应用 CSS。所以Form 一定是form，对吧？

@VidarshanAdithya 使用与示例相同的代码，但它不起作用。

【参考方案1】：

由于您没有指定您使用的表单类型，请尝试使用纯html 表单的此方法。

您为这些输入字段提供的名称标签非常重要，因为它们与它们的名称一样被提取，如果您在 EmailJS 模板中的名称与名称不匹配，它将不起作用。

提交方法：

const sendEmail = (e) => 
  
  e.preventDefault(); //prevent default behaviour

  emailjs
  .sendForm(
    'your-emailjs-service-key',
    'your-emailjs-template-key',
    e.target,
    'your-emailjs-user-id'
  )
  .then(
    (result) => 
      console.log(result.text);
      );
    ,
    (error) => 
      console.log(error)
      );
    
  );

  e.target.reset(); //reset explicitly because default is prevented

;

形式：

<form onSubmit=sendEmail>

   <input required type="text" placeholder="Name" name="name" />
   <input required type="email" placeholder="Email" name="email" />
   <input required type="number"  placeholder="ORCID" name="orcid" />

   <button>Submit</button>
 </form>

【讨论】：

您的示例有效。但请注意，我的示例完全不同。我正在使用 React Hook Form + EmailJS。我更改了所有标签，但也没有用。