如何发送Formik表单提交数据发送到私人电子邮件

Question

我正在使用formik和react来处理我已经开始的个人项目网站上的表单。我正试图弄清楚如何让数据输入到表单通过电子邮件/发送给我，以使用它。我该怎么做呢?

const formik = useFormik({
initialValues: {
// values removed to keep brief
},
validationSchema: Yup.object({
// values removed to keep brief
}),
onSubmit: values => {
alert(JSON.stringify(values, null, 2));
},
});

目前我有它，所以在提交时，它给用户一个对象的警告…我想要它，这样我就能收到同样的警报信息!

Answer 1

对于那些想要实现与我相同目标的人，我有一个react和vanilla js的解决方案． 我已经找到了使用emailjs的解决方案。这是一个扩展，允许您使用javascript发送电子邮件表单。文档比这详细得多，而且非常直接:documentation

我导入了模块，并使用我在这里注册后获得的个人用户id对其进行了初始化

import emailjs from "emailjs-com";
emailjs.init('userID')

然后我将这个onSubmit函数添加到我的react表单模块

function sendEmail() {
let templateParams = formik.values
emailjs.send([serviceId], [templateId], templateParams)
.then((result) => {
console.log('SUCCESS!', result.status, result.text)  //This is if you still want the page to reload (since e.preventDefault() cancelled that behavior) 
}, (error) => {
console.log('FAILED...', error);
});
}

formik.values是用户在表单中输入值的对象。Formik是react中制作表单的好工具这是他们的网站

serviceId和templateId参数是字符串，也是在注册emailjs时获取的。

第三个参数(' templateParams)只是返回给您并在电子邮件中发送的对象。

如果你使用的是普通的js，想做同样的事情…用emailjs.sendForm代替emailjs.send!

function sendEmail() {
emailjs.sendForm([serviceId], [templateId], [querySelector])
.then((result) => {
console.log('SUCCESS!', result.status, result.text)  //This is if you still want the page to reload (since e.preventDefault() cancelled that behavior) 
}, (error) => {
console.log('FAILED...', error);
});
}

其中querySelector是一个字符串的id/类的形式，即

<form onSubmit='sendEmail' id="formId">
labels...
inputs...
<form>

在本例中，[querySelector] = '#formId'