EmailJs 不通过 React 发送电子邮件

Question

我希望你做得很好，我正在 React 中使用 Emailjs 来获取电子邮件。我配置了 Emailjs 并且它可以正确发送测试电子邮件，但是当我尝试从我的项目发送时，它没有发送，甚至也没有显示任何错误

这是电子邮件的模板

这是我隐藏的 ID 和令牌，但我只是显示此图像来解释 清楚地

(1) 这里我导入 emailjs

import emailjs from '@emailjs/browser';

(2) 这是发送电子邮件的函数，（在第四个参数中，我只显示了 5 个字符，因为我隐藏在上图中）

function sendEmail(e) {
    e.preventDefault();
    emailjs.send('gmail', 'zaryabkhan864', e.target, 'G5CpT9*******')
        .then((result) => {
            console.log(result.text);
        }, (error) => {
            console.log(error.text);
        });
    e.target.reset()
}

(3) 这是表格代码

<form onSubmit={sendEmail}>
<div className="mb-3">
<label htmlFor="name" className="form-label">Your Name</label>
<input type="text" className="form-control" id="name" placeholder="Muhammad Zaryab Khan" name="name" />
</div>
<div className="mb-3">
<label htmlFor="email" className="form-label">Email address</label>
<input type="email" className="form-control" id="exampleFormControlInput1" placeholder="[email protected]" name="email" />
</div>
<div className="mb-3">
<label htmlFor="exampleFormControlTextarea1" className="form-label">Your Message</label>
<textarea className="form-control" id="Message" rows="5" name="message"></textarea>
</div>
<button type="submit" className="btn-theme">Send Message <i className="fa fa-paper-plane ms-2"></i></button>
</form>

现在我收到此错误

Answer 1

为表单添加ref属性，并广告useRef

const form = useRef<HTMLFormElement>(null);

您应该更改 e.target => form.current

Answer 2

const form = useRef();
    
const sendEmail = (e) => {
    e.preventDefault();
        
    emailjs.sendForm('service_id', 'template_id', form.current, 'user_id')
    .then((result) => {
        console.log(result.text);
    }, (error) => {
        console.log(error.text);
    });
    alert("Email Send");
};

Answer 3

您可以使用

useRef()

将值存储在表单字段中并将其传递到 emailjs

useState()

方法

，而不是像其他评论建议的那样使用 send()。

示例：

import React, { useState } from "react";
import emailjs from "@emailjs/browser";

export const Component = () => {
  // Create Form State
  const [formData, setFormData] = useState({
    message: "",
    email: "",
  });

  // Handle Submit
  function sendEmail(e) {
    e.preventDefault();
    emailjs.send("gmail", "zaryabkhan864", formData, "G5CpT9*******").then(
      (result) => {
        console.log(result.text);
      },
      (error) => {
        console.log(error.text);
      }
    );
    e.target.reset();
  }
};

我还建议您使用

.env

来存储环境变量。因为出于安全原因您不想公开这些值。

示例：

import React, { useState } from "react";
import emailjs from "@emailjs/browser";

export const Component = () => {
  // Create Form State
  const [formData, setFormData] = useState({
    message: "",
    email: "",
  });

  // Handle Submit
  function sendEmail(e) {
    e.preventDefault();
    emailjs
      .send(
        import.meta.env.EMAILJS_SERVICE_ID,
        import.meta.env.EMAILJS_TEMPLATE_ID,
        formData,
        import.meta.env.EMAILJS_PUBLIC_KEY
      )
      .then(
        (result) => {
          console.log(result.text);
        },
        (error) => {
          console.log(error.text);
        }
      );
    e.target.reset();
  }
};

并且您的

.env

文件应类似于：

EMAILJS_PUBLIC_KEY=public_key_value
EMAILJS_TEMPLATE_ID=template_id_value
EMAILJS_SERVICE_ID=service_id_value