[英]TypeError: e.preventDefault is not a function on React Hook Form using EmailJs
I got an error once the form is submitted:提交表单后出现错误:
TypeError: e.preventDefault is not a function.类型错误:e.preventDefault 不是函数。
Here is my code:这是我的代码:
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;
I saw the react hook form samples, but I'm not sure if i missed something on passing the data to the form.我看到了 react hook 表单示例,但我不确定在将数据传递给表单时是否遗漏了什么。
You can check it here: https://codesandbox.io/s/react-hook-form-using-emailjs-2k6x5你可以在这里查看: https : //codesandbox.io/s/react-hook-form-using-emailjs-2k6x5
While Guillaume's answer fixes the problem the following solution would be the way to handle it only using react-hook-form
and not using the event
object at all.虽然纪尧姆的回答解决了这个问题,但以下解决方案将是仅使用
react-hook-form
而根本不使用event
对象来处理它的方法。 So just use the emailjs.send
method and pass the form values provided by RHF to this method.所以只需使用
emailjs.send
方法并将RHF 提供的表单值传递给该方法即可。 To reset the form you could use the reset
method of 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();
};
The handleSubmit function calls your sendEmail with two parameters. handleSubmit 函数使用两个参数调用您的 sendEmail。 The first one is the form data and the second one is the event.
第一个是表单数据,第二个是事件。
This should solve your issue :这应该可以解决您的问题:
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();
};
Sandbox : https://codesandbox.io/s/react-hook-form-using-emailjs-forked-s2pey沙盒: https : //codesandbox.io/s/react-hook-form-using-emailjs-forked-s2pey
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.