使用 email.js 显示成功消息

Question

我想知道如何在用户提交表单后显示“消息发送成功”消息？

如有任何帮助，我们将不胜感激。现在消息已发送，但没有显示成功消息。

export const Contact = (props) => {
  const [{ name, email, message }, setState] = useState(initialState)

  const handleChange = (e) => {
    const { name, value } = e.target
    setState((prevState) => ({ ...prevState, [name]: value }))
  }
  const clearState = () => setState({ ...initialState })

  const handleSubmit = (e) => {
    e.preventDefault()
    console.log(name, email, message)
    emailjs
      .sendForm(
        'service_8cyr6cf', 'template_0koo5jf', e.target, 'TtcKG0LCV4-mP5FnV'
      )
      .then(
        (result) => {
          console.log(result.text)
          clearState()
        },
        (error) => {
          console.log(error.text)
        }
      )
  }

Answer 1

emailjs 只处理发送邮件部分。如果你想在你的 UI 上显示一些东西，你需要创建一些 HTML 来显示它。类似于：

export const Contact = (props) => {
  const [{ name, email, message }, setState] = useState(initialState)
  const [statusMessage, setStatusMessage] = useState("");

  const handleChange = (e) => {
    const { name, value } = e.target
    setState((prevState) => ({ ...prevState, [name]: value }))
  }
  const clearState = () => setState({ ...initialState })

  const handleSubmit = (e) => {
    e.preventDefault()
    console.log(name, email, message)
    emailjs
      .sendForm(
        'service_8cyr6cf', 'template_0koo5jf', e.target, 'TtcKG0LCV4-mP5FnV'
      )
      .then(
        (result) => {
          console.log(result.text, result.status);
          clearState();
          setStatusMessage("Email sent success");
        },
        (error) => {
          console.log(error.text);
          setStatusMessage(`${error.text} happened`);
        }
      )
  }

  return 
  (
     <div>
       <form></form>
       <p>{statusMessage}</p>
    </div>
  )

使用 email.js 显示成功消息

displaying a sucess message using email.js

jsx

reactjs