javascript - 使用 Email.js 发送邮件所需的用户 ID

标签 javascript reactjs email

所以我正在尝试在我的投资组合中实现此电子邮件功能,我将在底部插入当前代码。但是我不断收到一条错误消息,提示需要用户 ID error message

我访问该网站并查找我的用户 ID,根据一些文档,用户 ID 应该放在 init() 之后,但没有用户 ID。我给支持人员发了电子邮件,他们说用户 ID 已被公钥替换。这是我最初在该空间中拥有的内容,但这就是我收到的错误。

这是我当前的代码,当我尝试发送邮件时会生成错误

import React, { useState, useRef } from "react";
import emailjs from "emailjs-com";
import { init } from "@emailjs/browser";

import "./contact.css";
init("wcnCiEjf9yoZnUt0e");
export default function Contact() {
  const [name, setname] = useState("");

  const [email, setemail] = useState("");
  const form = useRef();
  const [message, setmessage] = useState("");
  const sendEmail = (e) => {
    e.preventDefault();
    // console.log(e);
    console.log(form.current);

    const templateparams = {
      from_name: name + " " + email,
      to_name: "<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e793868a869586868983958286908e8b85929589a7808a868e8bc984888a" rel="noreferrer noopener nofollow">[email protected]</a>",
      feedback: message,
    };
    emailjs.send("service_e0zkrad", "template_7qrzf2e", templateparams).then(
      function (response) {
        console.log("SUCCESS!", response.status, response.text);
      },
      function (error) {
        console.log("FAILED...", error);
      }
    );
  };

  return (
    <>
      <div>
        <div className="contact-me-card row">
          <div className="col-lg-6 col-md-5 col-sm-12 left-contact px-2 py-2">
            <span className="get-in-touch mx-4 my-5">Get in touch </span>

            <div className="py-5 d-flex justify-content-center">
              <lottie-player
                src="https://assets3.lottiefiles.com/packages/lf20_u25cckyh.json"
                background="transparent"
                speed="1"
                style={{ width: "300px" }}
                loop
                autoplay
              ></lottie-player>
            </div>
          </div>

          <div className="col-lg-6 col-md-5 col-sm-12 my-auto">
            <form
              ref={form}
              className="d-flex flex-column card-contact-right"
              onSubmit={sendEmail}
            >
              <div className="input-group my-3 d-flex flex-column">
                <label> Name </label>
                <input
                  value={name}
                  onChange={(e) => {
                    setname(e.target.value);
                  }}
                  type="text"
                  placeholder="enter your name"
                  className="input-groups"
                />
              </div>
              <div className="input-group my-3 d-flex flex-column">
                <label>Email </label>
                <input
                  value={email}
                  onChange={(e) => {
                    setemail(e.target.value);
                  }}
                  type="text"
                  placeholder="enter your Email"
                  className="input-groups"
                />
              </div>
              <div className="input-group my-3 d-flex flex-column">
                <label> Message </label>
                <textarea
                  value={message}
                  onChange={(e) => {
                    setmessage(e.target.value);
                  }}
                  type="text"
                  placeholder="enter your message"
                  className="input-groups"
                />
              </div>
              <div className="input-group my-3 d-flex flex-column">
                <input
                  className="btn btn-success"
                  type="submit"
                  value="Send Message"
                />{" "}
              </div>
            </form>
          </div>
        </div>
      </div>
    </>
  );
}

任何帮助将不胜感激,因为我完全陷入困境。

最佳答案

调用 emailjs.send() 时,您需要添加 public_key 作为第四个参数。例如:

emailjs.send("service_e0zkrad", "template_7qrzf2e", templateparams, <PUBLIC_KEY>).then(
      function (response) {
        console.log("SUCCESS!", response.status, response.text);
      },
      function (error) {
        console.log("FAILED...", error);
      }
    );

这对我的 React 应用程序很有用。我在此处的文档中找到了它:https://www.emailjs.com/docs/examples/reactjs/

emailjs docs

希望有帮助!

关于javascript - 使用 Email.js 发送邮件所需的用户 ID,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/71883246/

相关文章:

C# OpenPOP 索引

javascript - 计算价格

javascript - AngularJS 指令将函数执行顺序与 require 链接起来

javascript - 如何使用 axios 在请求 header 中发送 clientIP

reactjs - 如何将 react 控制台错误记录到文件中?

php - 如何在 zf2 中使用 smtp 发送电子邮件?

html - 格式化电子邮件的最佳方式(CSS/表格/内联样式/外部样式表)是什么?

java - 在 Java 中使用 IE/Chrome HTML-Renderer 或使用 JavaScript 存储文件

javascript - 在 jQuery 表单提交中传递名称

javascript - 找不到模块 '@babel/generator' 但已安装