React中用户提交表单后如何将自填数据发送至个人邮箱？

EmailJS完全支持动态设置收件人，不用局限于固定的管理员邮箱，核心是把用户输入的邮箱作为动态参数传入邮件模板。下面是具体实现步骤：

• 第一步：在EmailJS后台配置动态收件人模板
  登录你的EmailJS控制台，创建或修改邮件模板：

  • 把收件人（To）字段的值改成模板变量，比如 {{user_email}}（变量名要和前端传入的参数名一致）
  • 模板内容里可以插入其他表单数据变量，比如 {{user_name}}、{{message}} 等，对应用户填写的表单字段

• 第二步：前端表单添加用户邮箱输入项
  在HTML表单里增加让用户输入自身邮箱的输入框，确保name属性和模板变量名对应：

  <form id="user-form">
    <input type="text" name="user_name" placeholder="你的姓名" required>
    <input type="email" name="user_email" placeholder="你的邮箱" required>
    <textarea name="message" placeholder="留言内容" required></textarea>
    <button type="submit">提交并发送到我的邮箱</button>
  </form>
  

• 第三步：前端JS调用EmailJS发送动态邮件
  引入EmailJS SDK后，编写提交事件逻辑，把用户输入的邮箱和其他表单数据一起作为参数传入send方法：

  // 初始化EmailJS（替换成你的公钥）
  emailjs.init('YOUR_PUBLIC_KEY');
  
  const form = document.getElementById('user-form');
  form.addEventListener('submit', (e) => {
    e.preventDefault();
  
    // 直接传入form元素，EmailJS会自动匹配name对应的字段
    emailjs.send('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', form)
      .then((response) => {
        console.log('邮件发送成功！', response.status, response.text);
        alert('数据已发送到你的邮箱，请查收');
        form.reset();
      }, (err) => {
        console.error('邮件发送失败：', err);
        alert('发送失败，请稍后重试');
      });
  });
  

注意事项 #

• 模板变量名要和表单输入框的name属性完全一致，否则无法正确替换内容
• 前端要做好邮箱格式验证（HTML的type="email"已提供基础验证，也可加JS二次验证）
• 若发送失败，先检查EmailJS的服务ID、模板ID、公钥是否正确，再通过控制台错误信息定位问题

内容的提问来源于stack exchange，提问作者Barnabas Olugbogi