./src/Components/ContactForm.jsx 第 37 行：'sendEmail' 未定义 no-undef

Question

如果我的 post 格式不正确，我深表歉意，我在 JS/React 或 Stack overflow

方面都没有经验

这是我在两天内第 7 次尝试让我的联系表完全正常工作。我一直在努力，唯一没有通过提交电子邮件发送的项目是 TNC 和促销框。

我需要 复选框 来发送 true or false 取决于是否选中它们。 如果我可以将真或假转换为是和否，则加分

我得到的错误是

Failed to compile.

./src/Components/ContactForm.jsx
  Line 37:  'sendEmail' is not defined  no-undef

这是受影响的行

<Form onSubmit={sendEmail}>

这是我的 "sendMail" 箭头函数

sendEmail = (e) => {
    e.preventDefault();
    emailjs.sendForm("test", "testTemp", e.target, "user_EPYkKnHwljQTCbJkzO7YD9")
      .then(
        (result) => {
          alert(+"Email sent successfully!");
          e.target.reset();
        },
        (error) => {
          alert("Email send failed... :( I had one job...");
        }
      );
  };

我在 https://test.ghostrez.net 上有一个旧的非功能版本的联系表，如果它有任何帮助的话。

这里是完整的 'ContactForm.jsx' 以防有帮助。

import React from "react";
import emailjs from "emailjs-com";
import { Component } from "react";
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 = () => {
    const TNC = !this.state.TNC;
    this.setState({ TNC });
  };
  onTogglePromos = () => {
    const promos = !this.state.promos;
    this.setState({ promos });
  };
  sendEmail = (e) => {
    e.preventDefault();
    emailjs.sendForm("test", "testTemp", e.target, "user_EPYkKnHwljQTCbJkzO7YD9")
      .then(
        (result) => {
          alert(+"Email sent successfully!");
          e.target.reset();
        },
        (error) => {
          alert("Email send failed... :( I had one job...");
        }
      );
  };
  render() {
    return (
      <Form onSubmit={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"
            onChange=""
            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
              control={Checkbox}
              data="TNC"
              onChange=''
            />
          </Form.Field>
          <Form.Field>
            <Checkbox
              label="Send me occasional updates and promotions"
              defaultChecked
              control={Checkbox}
              data="promos"
              onChange=''
            />
          </Form.Field>
        </Form.Group>
        <Form.Field
          id="Submit"
          control={Button}
          type="submit"
          value="submit"
          positive
          content="Submit"
        />
      </Form>
    );
  }
}

Answer 1

您在以下语句中指的是 sendEmail：

<Form onSubmit={sendEmail}>

但是，sendEmail 是 ContactUs component/instance 的成员。您必须使用 this.sendEmail.

来引用它

<Form onSubmit={this.sendEmail}>

./src/Components/ContactForm.jsx 第 37 行：'sendEmail' 未定义 no-undef

./src/Components/ContactForm.jsx Line 37: 'sendEmail' is not defined no-undef

javascript

reactjs

semantic-ui