Semantic UI React复选框值无法传入EmailJS.sendForm问题求助

问题原因 #

1. Semantic UI的Checkbox组件不会自动生成带name属性的原生表单复选框，emailjs.sendForm默认只会读取表单内有name属性的原生输入控件的值，所以无法获取到TNC和promos的状态
2. 你当前的提交逻辑写反了：this.state.TNC !== true的时候执行发送，等于未勾选条款才发邮件，和需求相反
3. Checkbox的选中状态绑定应该用checked属性而非value属性，value是用来存储选项固定值的，不是控制选中状态的

第一步：修改复选框代码 #

把两个Checkbox的data属性改为name，将value替换为checked绑定state：

<Form.Group widths="equal">
  <Form.Field>
    <Checkbox
      label="I agree to the Terms and Conditions"
      required
      control={Checkbox}
      name="TNC"
      onChange={this.onToggle}
      checked={this.state.TNC}
    />
  </Form.Field>
  <Form.Field>
    <Checkbox
      label="Send me occasional updates and promotions"
      defaultChecked
      control={Checkbox}
      name="promos"
      checked={this.state.promos}
      onChange={this.onTogglePromos}
    />
  </Form.Field>
</Form.Group>

第二步：修改sendEmail提交逻辑 #

先修正判断逻辑，再把state里的两个复选框值合并到表单提交参数里，改用emailjs.send方法自己组装参数更灵活：

sendEmail = (e, props) => {
  e.preventDefault();
  // 修正判断逻辑：未勾选TNC时弹出提示
  if (this.state.TNC !== true) {
    return alert("You need to accept the Terms and Conditions before proceeding.");
  }
  // 获取表单内所有输入项的值
  const formData = new FormData(e.target);
  const params = Object.fromEntries(formData.entries());
  // 手动加入两个复选框的状态值，可自定义显示文本
  params.TNC = this.state.TNC ? "同意条款" : "不同意条款";
  params.promos = this.state.promos ? "同意接收推广信息" : "不同意接收推广信息";
  // 调用emailjs.send发送
  return emailjs
    .send("test", "testTemp", params, "user_EPYkKnHwljQTCbuiyfJkzO7YD")
    .then(
      (result) => {
        alert("Email sent successfully!");
        e.target.reset();
        // 发送成功后重置复选框状态
        this.setState({ TNC: false, promos: true });
      },
      (error) => {
        alert("Email send failed... :( I had one job...");
      }
    );
};

修改完成后，你在EmailJS的邮件模板里直接用{{TNC}}和{{promos}}变量就能拿到对应的值。

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