onSubmit上的一个条件是，只有当react hook表单没有错误时，才用类型脚本中的emailjs发送电子邮件

Question

我是typescript和react世界的新手。我已经创建了一个非常简单的表单，其中包含一个名称和电子邮件字段，使用react hook表单

这是我的onSubmit和handleSubmit 代码

const { register, handleSubmit, watch, formState: { errors } } = useForm<Inputs>();
const onSubmit: SubmitHandler<Inputs> = data => console.log(data);

我有这个功能发送电子邮件，

function sendEmail (e: React.FormEvent<HTMLFormElement>){
e.preventDefault();
emailjs.sendForm('Your_service_id', 'your_template_id',e.currentTarget, 'Your_user_id')
.then(function(response) {
console.log('SUCCESS!', response.status, response.text);
}, function(error) {
console.log('FAILED...', error);
});

} 

当我写时

<form action="#" method="POST" className="space-y-6" onSubmit={sendEmail} >
--
--
</form>

或

<form action="#" method="POST" className="space-y-6" onSubmit={  handleSubmit(onSubmit)} >
--
--
</form>

一切正常

但当我写这样的东西时：

<form action="#" method="POST" className="space-y-6" onSubmit={ () => {sendEmail; handleSubmit(onSubmit);}} >
--
--
</form> 

那么什么都不起作用

我正在努力实现一个条件，以便只有在react hook表单中没有错误的情况下才能发送电子邮件。如果有人能帮我，我将不胜感激。谢谢😊

Answer 1

onSubmit获取一个函数，如果你想在handleSubmit中编写一个条件函数，可以这样写：

<form action="#" method="POST" className="space-y-6" onSubmit={handleSubmit(yourCondition ? onSubmit:sendEmail)} >
--
--
</form> 

或者您可以为handleSubmit编写单个函数：

<form action="#" method="POST" className="space-y-6" onSubmit={handleSubmit(yourFunction)} > // example: onSubmit
--
--
</form>