TypeError：e.preventDefault 不是使用 EmailJs 的 React Hook Form 上的函数答案

【问题标题】：TypeError: e.preventDefault is not a function on React Hook Form using EmailJsTypeError：e.preventDefault 不是使用 EmailJs 的 React Hook Form 上的函数
【发布时间】：2021-10-30 18:48:48
【问题描述】：

提交表单后出现错误：
TypeError: e.preventDefault is not a function.

这是我的代码：

import {React} from 'react';
import emailjs from 'emailjs-com';
import {useForm} from "react-hook-form";

const NameForm = () => {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const sendEmail = (e) => {
    e.preventDefault();

    emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', e.target, 'YOUR_USER_ID')
      .then((result) => {
          console.log(result.text);

      }, (error) => {
          console.log(error.text);
      });
      e.target.reset();
  }

    return (
      <div>
        <h1 className="text-center text-md-left mb-3">Get in Touch</h1>
        <form className="contact-form" onSubmit={handleSubmit(sendEmail)}>
          <div className="form-group mb-0 py-3">
            <textarea className="form-control custom--fields-mod text-the-primary" id="message" rows="3" placeholder="Message *" name="message" {...register("message", { required: true })}></textarea>
            {errors.message && <span className="invalid-feedback d-block">Please fill out this field.</span>}
          </div>        
          <div className="form-group row py-2 mb-0">
              <div className="col-md-6">
                <div>
                  <div className="d-flex align-items-center">
                    <input className="mr-2" type="checkbox" id="yes_i_understand" name="yes_i_understand" {...register("yes_i_understand", { required: true })} />
                    <label className="font-size-12 mb-0" htmlFor="yes_i_understand">I understand and agree to the Privacy Policy and Terms and Conditions.</label>
                  </div>{errors.yes_i_understand && <span className="invalid-feedback d-block">You must agree before submitting.</span>}
                </div>
              </div>
              <div className="col-md-6 text-center text-md-left py-2 py-md-0">
                <input className="buttons-width float-md-right btn btn-dark-moderate-orange rounded-0" type="submit" value="SEND MESSAGE" />
              </div>
            </div>
        </form>
      </div>
    );

}
export default NameForm;

我看到了 react hook 表单示例，但我不确定在将数据传递给表单时是否遗漏了什么。

您可以在这里查看： https://codesandbox.io/s/react-hook-form-using-emailjs-2k6x5

【问题讨论】：

更新了codesandbox.io/s/react-hook-form-using-emailjs-2k6x5的链接

标签： javascript reactjs email react-hook-form

【解决方案1】：

虽然 Guillaume 的回答解决了问题，但以下解决方案将是仅使用 react-hook-form 而根本不使用 event 对象来处理它的方法。所以只需使用emailjs.send 方法并将RHF 提供的表单值传递给该方法即可。要重置表单，您可以使用 RHF 的reset 方法。

const {
  register,
  handleSubmit,
  reset,
  formState: { errors }
} = useForm();
const sendEmail = (formData) => {
  emailjs
    .send("YOUR_SERVICE_ID", "YOUR_TEMPLATE_ID", formData, "YOUR_USER_ID")
    .then(
      (result) => {
        console.log(result.text);
      },
      (error) => {
        console.log(error.text);
      }
    );
  reset();
};

【讨论】：

这个看起来不错，但是提交成功后，请尝试在不刷新页面的情况下再次点击按钮并填写复选框，您需要双击复选框才能进行错误验证。跨度>
是的，对不起 - 你是对的。我忘记通过useForm 的配置选项为表单提供defaultValues。你可以阅读更多关于resethere的信息。我更新了 CodeSandbox，请重新测试。
是的，我得到了它并且它正在工作，我刚刚从 defaultValues 中删除了消息。如果它是正确的，你可以在这里检查我的。谢谢！ https://codesandbox.io/s/react-hook-form-using-emailjs-2k6x5
看起来不错。 ? 虽然为所有表单字段提供defaultValues 会更好。
knoefel 希望你能在这里帮助我stackoverflow.com/questions/69038402/…

【解决方案2】：

handleSubmit 函数使用两个参数调用您的 sendEmail。第一个是表单数据，第二个是事件。

这应该可以解决您的问题：

const sendEmail = (data, e) => {
    e.preventDefault();

    emailjs
      .sendForm("YOUR_SERVICE_ID", "YOUR_TEMPLATE_ID", e.target, "YOUR_USER_ID")
      .then(
        (result) => {
          console.log(result.text);
        },
        (error) => {
          console.log(error.text);
        }
      );
    e.target.reset();
  };

沙盒：https://codesandbox.io/s/react-hook-form-using-emailjs-forked-s2pey

【讨论】：