IT技术 - TypeError：e.preventDefault 不是使用 EmailJs 的 React Hook Form 上的函数 - 吾爱随笔录

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

IT技术 javascript reactjs email react-hook-form

2021-05-22 21:28: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

2个回答

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

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();
};

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

其它你可能感兴趣的问题

上一篇当数据类属性更改时重新渲染 React 组件下一篇如何在react中返回单击元素的属性？