如何将Semantic UI复选框的true/false状态传递到e.target供EmailJS使用

问题原因 #

你遇到的问题核心有两点：

1. Semantic UI React 的 Checkbox 是封装组件，原生复选框的选中状态由 checked 属性控制而非 value，你之前绑定 value 无法正确同步选中状态，也不会将状态值同步到表单提交数据中。
2. emailjs.sendForm 方法只会自动读取表单下带 name 属性的原生表单控件值，封装后的 Checkbox 组件默认不会把布尔状态暴露给 e.target 表单对象，所以这两个字段无法被自动采集。

解决方案 #

推荐使用手动拼接表单参数的方式实现，对现有代码改动最小，且能保证传入的是预期的布尔值，修改步骤如下：

1. 修正 Checkbox 组件属性，将 value 替换为 checked 绑定状态，保证组件选中状态和 state 同步
2. 修改 sendEmail 方法，手动收集所有表单字段+两个复选框的状态值，改用 emailjs.send 方法提交

修改后的核心代码片段

首先是复选框部分的代码：

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

然后是修改后的 sendEmail 方法：

sendEmail = (e, props) => {
  e.preventDefault();
  if (this.state.TNC) {
    // 手动收集所有提交参数，布尔值直接从state取
    const submitParams = {
      firstName: e.target.firstName.value,
      lastName: e.target.lastName.value,
      email: e.target.email.value,
      phone: e.target.phone.value,
      message: e.target.message.value,
      TNC: this.state.TNC,
      promos: this.state.promos
    }
    return emailjs
      .send("tester", "testiTemp", submitParams, "user_EPYkKnHwiytfdolol565ljQTCbJkzO7YD")
      .then(
        (result) => {
          alert("邮件发送成功！");
          e.target.reset();
          // 提交后重置复选框状态为初始值
          this.setState({
            TNC: false,
            promos: true
          })
        },
        (error) => {
          alert("邮件发送失败...");
        }
      );
  } else {
    return alert("提交前需要先同意条款和条件。");
  }
};

修改完成后提交表单，emailjs 收到的 TNC 和 promos 字段就会是符合预期的布尔值，选中为 true，未选中为 false。

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