React集成EmailJS时如何在邮件模板中输出复选框选中值

你当前代码有3个直接导致复选框值无法被正确收集的问题：

• tipoazienda初始值设为空字符串，多选复选框的选中值是多值集合，应该用数组存储
• 错误地将value和onChange属性绑定在<fieldset>标签上，fieldset本身不会响应内部复选框的选中事件，内部的复选框也没有做受控绑定，选中操作根本不会更新toSend状态
• 每个复选框缺少对应id属性，和label的htmlFor属性不匹配，点击标签无法触发复选框选中，本身也不符合表单规范

1. 修正状态初始值 #

把tipoazienda的初始值从空字符串改为空数组，用于存储多个选中项：

const [toSend, setToSend] = useState({
  piva: '',
  codicefiscale: '',
  ragionesociale: '',
  sedelegale: '',
  sedeproduttiva: '',
  email: '',
  motivazione: '',
  tipoazienda: [], // 多选复选框用数组存储选中值
})

2. 编写复选框专属的状态更新逻辑 #

不要复用普通文本输入框的change处理函数，单独写复选框的选中/取消选中逻辑：

const handleCheckboxChange = (e) => {
  const { value, checked } = e.target;
  setToSend(prev => {
    const updatedAziendaType = checked
      ? [...prev.tipoazienda, value] // 选中就把当前值加入数组
      : prev.tipoazienda.filter(item => item !== value); // 取消选中就从数组移除对应值
    return {
      ...prev,
      tipoazienda: updatedAziendaType
    }
  })
}

3. 修正表单复选框的属性绑定 #

移除fieldset上无效的value和onChange绑定，给每个复选框补上id、受控checked属性和事件绑定：

<fieldset required name="tipoazienda">
  <legend>Tipo di azienda</legend>
  <input 
    type="checkbox" 
    id="toolmaker"
    value="toolmaker"
    checked={toSend.tipoazienda.includes('toolmaker')}
    onChange={handleCheckboxChange}
  /> 
  <label htmlFor="toolmaker">Tool Maker</label>

  <br />

  <input 
    type="checkbox" 
    id="tooluser"
    value="tooluser"
    checked={toSend.tipoazienda.includes('tooluser')}
    onChange={handleCheckboxChange}
  /> 
  <label htmlFor="tooluser">Tool User</label>

  <br />

  <input 
    type="checkbox" 
    id="enduser"
    value="enduser"
    checked={toSend.tipoazienda.includes('enduser')}
    onChange={handleCheckboxChange}
  /> 
  <label htmlFor="enduser">End User</label>
</fieldset>

4. 发送前转换数据格式适配EmailJS #

EmailJS模板变量不支持直接渲染数组，在调用发送方法前，把选中值的数组转为逗号分隔的字符串即可：

const emailParams = {
  ...toSend,
  tipoazienda: toSend.tipoazienda.join(', ')
}
// 后续把emailParams作为参数传入emailjs.send方法即可

配置完成后，在EmailJS的邮件模板里直接使用{{tipoazienda}}变量，就能正常输出用户选中的所有复选框内容。

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