React Hook Form配合EmailJs提交时触发e.preventDefault不是函数的TypeError报错

错误原因 #

react-hook-form的handleSubmit方法包裹提交回调后，会自动执行preventDefault阻止表单默认提交行为，无需手动调用。同时它传递给提交回调的第一个参数是校验通过后的表单字段数据对象，原生事件对象是第二个可选参数，你把第一个参数当做事件对象调用preventDefault自然会触发类型错误。

修复后代码 #

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

const NameForm = () => {
  const { register, handleSubmit, formState: { errors }, reset } = useForm();
  // 第一个参数为表单数据，第二个参数才是原生事件对象
  const sendEmail = (formData, e) => {
    emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', e.target, 'YOUR_USER_ID')
      .then((result) => {
          console.log(result.text);
      }, (error) => {
          console.log(error.text);
      });
    // 调用react-hook-form内置的reset方法重置表单，比直接操作DOM更规范
    reset();
  }

  return (
    <div>
      <h1 className="text-center text-md-left mb-3">联系我们</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="留言 *" name="message" {...register("message", { required: true })}></textarea>
          {errors.message && <span className="invalid-feedback d-block">请填写此字段</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">我已阅读并同意隐私政策和服务条款</label>
                </div>{errors.yes_i_understand && <span className="invalid-feedback d-block">提交前需同意相关条款</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="发送留言" />
            </div>
          </div>
      </form>
    </div>
  );
}
export default NameForm;

内容的提问来源于stack exchange，提问作者clarkf