,可以通过以下步骤实现:
下面是一个示例代码:
import React, { useState } from 'react';
import emailjs from 'emailjs-com';
function MyForm() {
const [secondParam, setSecondParam] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
// 获取用户输入的数据
const formData = new FormData(e.target);
const userEmail = formData.get('email');
// 调用EmailJ的API发送电子邮件
emailjs.send('<YOUR_SERVICE_ID>', '<YOUR_TEMPLATE_ID>', {
to_email: userEmail,
second_param: secondParam,
}).then((response) => {
console.log('Email sent successfully!', response.status, response.text);
}).catch((error) => {
console.error('Failed to send email:', error);
});
};
return (
<form onSubmit={handleSubmit}>
<label>
Email:
<input type="email" name="email" required />
</label>
<label>
Second Parameter:
<input type="text" value={secondParam} onChange={(e) => setSecondParam(e.target.value)} />
</label>
<button type="submit">Submit</button>
</form>
);
}
export default MyForm;
在上面的示例代码中,需要将<YOUR_SERVICE_ID>
和<YOUR_TEMPLATE_ID>
替换为您在EmailJ上创建的服务和模板的实际ID。此外,您还可以根据需要自定义表单的其他字段和样式。
请注意,这只是一个简单的示例,实际使用中可能需要进行更多的验证和错误处理,以确保表单数据的正确性和安全性。
企业创新在线学堂
DB-TALK 技术分享会
云+社区技术沙龙[第8期]
Elastic 实战工作坊
Elastic 实战工作坊
T-Day
云+社区技术沙龙 [第31期]
北极星训练营
云+社区技术沙龙[第27期]
北极星训练营
领取专属 10元无门槛券
手把手带您无忧上云