React中EmailJS发送邮件时表单内容为空问题求助

我在个人网站中配置EmailJS接收用户消息，邮件能正常发送，但邮件里的姓名、邮箱地址、主题及消息内容全为空。

React代码 #

const handleSendMessage = (e) =>{
    e.preventDefault();
    console.log(form.current);
    emailjs.sendForm(process.env.REACT_APP_EMAILJS_SERVICE_KEY, process.env.REACT_APP_EMAILJS_TEMPLATE_NAME, form.current, process.env.REACT_APP_EMAILJS_PUBLIC_KEY)
      .then((result) => {
          console.log(result.text);
      }, (error) => {
          console.log(error.text);
      });
}

<form ref={form} id='contact-form' onSubmit={handleSendMessage}>
                    <input className='contact-form-input' id='contact-full-name' placeholder='Full Name' type='text' name="name" required/>
                    <label htmlFor='name' className='contact-form-label-name'>Full Name</label>
                    <input className='contact-form-input' id='contact-email-address' placeholder='Email Address' type='email' name='email' required/>
                    <label htmlFor='email' className='contact-form-label-email'>Email Address</label>
                    <input className='contact-form-input' id='contact-subject' placeholder='Subject' type='text' name='subject' required/>
                    <label htmlFor='subject' className='contact-form-label-subject'>Subject</label>
                    <textarea name='message' id='contact-form-message' placeholder='Message' required/>
                    <label htmlFor='message' className='contact-form-label-message'>Message</label>
                    <div className='contact-form-submit-container'>
                        <input type='submit' id='contact-form-submit-btn' name='submit' value='Send Message'/>
                    </div>
</form>

EmailJS模板 #

A new message has been sent from the contact page.



Message Senders full name: {{{name}}}

Message Sender's email: {{{email}}}

Message subject: {{{subject}}}

Message: {{{message}}}

邮件情况 #

收到的邮件中，所有表单字段对应的位置均为空白。

1. 确认表单Ref正确声明 #

在组件顶部添加Ref声明，确保Ref绑定到表单元素：

import { useRef } from 'react';

const YourComponent = () => {
  const form = useRef(null); // 必须添加这行代码

  // ... 其他代码包括handleSendMessage
}

2. 检查EmailJS后台模板变量配置 #

登录EmailJS后台，打开对应的邮件模板：

• 进入模板编辑页面，确认Variables区域已添加name、email、subject、message这几个变量（即使模板内容里写了占位符，也要在后台配置这些变量，EmailJS才能正确填充数据）。

3. 验证表单字段与模板变量的一致性 #

确认表单中input/textarea的name属性值和模板中的变量名完全一致（区分大小写），你的代码里这部分是匹配的，可忽略此步，但如果有拼写错误需要修正。

4. 调试表单数据 #

在handleSendMessage中添加调试代码，检查表单数据是否正确获取：

const handleSendMessage = (e) =>{
    e.preventDefault();
    // 打印表单所有字段的值
    console.log('Name:', form.current.elements.name.value);
    console.log('Email:', form.current.elements.email.value);
    console.log('Subject:', form.current.elements.subject.value);
    console.log('Message:', form.current.elements.message.value);
    
    emailjs.sendForm(...)
    // ... 其余代码
}

如果控制台打印的都是空值，说明表单Ref未正确绑定，或字段的name属性有误；如果有值，那问题出在EmailJS模板配置。

5. 修正Label与Input的绑定（规范优化） #

当前代码中label的htmlFor属性与input的id不匹配，虽然不影响数据提交，但建议修正以符合HTML规范：

<!-- 原代码 -->
<input id='contact-full-name' name="name" .../>
<label htmlFor='name'>Full Name</label>

<!-- 修正后 -->
<input id='contact-full-name' name="name" .../>
<label htmlFor='contact-full-name'>Full Name</label>

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