React类组件ContactForm sendEmail未定义报错与复选框提交问题

问题1：编译报错 'sendEmail' is not defined #

类组件中调用自身定义的方法，需要通过this指向当前组件实例，你在render方法里直接写onSubmit={sendEmail}，编译器找不到对应的变量，修改为：

<Form onSubmit={this.sendEmail}>

即可解决编译报错。

问题2：复选框值无法随邮件提交、需转换为yes/no格式 #

你使用的Semantic UI的Checkbox组件是非原生表单控件，不会自动将选中状态同步到表单提交数据中，且你目前给Checkbox绑定的onChange是空值，已经定义的onToggle、onTogglePromos方法没有被调用，state状态也不会跟着用户操作更新。
修改步骤如下：

1. 给两个Checkbox绑定对应的状态切换方法，关联state的选中值，删除无用的空onChange、重复的control属性
2. 修改sendEmail方法，手动组装所有要提交的参数，将布尔值转为yes/no后再调用emailjs的发送接口，比直接用sendForm更灵活可控。
3. 修复原代码中alert(+"Email sent successfully!")里多余的加号，避免弹出NaN的异常。

修改后完整代码：

import React from "react";
import emailjs from "emailjs-com";
import { Button, Checkbox, Form, Input, TextArea } from "semantic-ui-react";

export default class ContactUs extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      TNC: false,
      promos: true,
    };
  }
  onToggle = () => {
    this.setState(prev => ({ TNC: !prev.TNC }));
  };
  onTogglePromos = () => {
    this.setState(prev => ({ promos: !prev.promos }));
  };
  sendEmail = (e) => {
    e.preventDefault();
    // 手动组装表单数据
    const formData = new FormData(e.target);
    const submitParams = {
      firstName: formData.get('firstName'),
      lastName: formData.get('lastName'),
      email: formData.get('email'),
      phone: formData.get('phone'),
      message: formData.get('message'),
      // 布尔值转yes/no
      TNC: this.state.TNC ? 'yes' : 'no',
      promos: this.state.promos ? 'yes' : 'no'
    }
    // 用send方法代替sendForm，传组装好的参数
    emailjs.send("test", "testTemp", submitParams, "user_EPYkKnHwljQTCbJkzO7YD9")
      .then(
        (result) => {
          alert("Email sent successfully!");
          e.target.reset();
          // 提交完成后重置复选框状态
          this.setState({
            TNC: false,
            promos: true
          })
        },
        (error) => {
          alert("Email send failed... :( I had one job...");
        }
      );
  };
  render() {
    return (
      <Form onSubmit={this.sendEmail}>
        <Form.Group widths="equal">
          <Form.Field
            id="firstName"
            control={Input}
            label="First name"
            name="firstName"
            placeholder="First name"
            required
          />
          <Form.Field
            id="lastName"
            name="lastName"
            control={Input}
            label="Last name"
            placeholder="Last name"
          />
        </Form.Group>
        <Form.Group widths="equal">
          <Form.Field
            id="Email"
            control={Input}
            label="Email"
            name="email"
            placeholder="joe@schmoe.com"
            required
          />
          <Form.Field
            id="Phone"
            control={Input}
            label="Phone"
            name="phone"
            placeholder="0469 420 689"
            required
          />
        </Form.Group>
        <Form.Field
          id="Message"
          control={TextArea}
          label="Message"
          name="message"
          placeholder="Message"
          required
        />
        <Form.Group widths="equal">
          <Form.Field>
            <Checkbox
              label="I agree to the Terms and Conditions"
              required
              checked={this.state.TNC}
              onChange={this.onToggle}
            />
          </Form.Field>
          <Form.Field>
            <Checkbox
              label="Send me occasional updates and promotions"
              checked={this.state.promos}
              onChange={this.onTogglePromos}
            />
          </Form.Field>
        </Form.Group>
        <Form.Field
          id="Submit"
          control={Button}
          type="submit"
          value="submit"
          positive
          content="Submit"
        />
      </Form>
    );
  }
}

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