未处理的拒绝(TypeError)：无法在字符串“Message”上创建属性“className”

Question

我试图通过在我的网页中使用“EamilJS”来创建“联系人表单”，这个页面是在React.js中创建的。一切正常，但当我添加“动态类名”时，它会返回错误。

这些动态ClassNames的目的是在发送用户消息后显示成功消息。(我指的是博客：https://placidowang.medium.com/how-to-add-an-email-form-to-your-react-website-for-free-using-emailjs-and-react-hook-form-7267d6365291 )

当我点击“发送”按钮时显示的错误，但电子邮件仍然成功提交。

Contact.jsx:21 Uncaught (in promise) TypeError: Cannot create property 'className' on string 'Message'

<h2>Contact</h2>
<p className='status-message' >{statusMessage}</p>
<form onSubmit={handleSubmit(onSubmit)} id='contact-form'>
...
</form>

所以，ClassName

应该更新“状态-消息成功”或“状态-消息”。

const onSubmit = (data) => {
    generateContactNumber();
    sendForm('default_service', 'template_anr3xk1', '#contact-form')
      .then(function(response) {
      // ...
      setStatusMessage("Message sent!");
      statusMessage.className = "status-message success";
      console.log(statusMessage);
      setTimeout(()=> {
        statusMessage.className = 'status-message'
      }, 5000)
    }, function(error) {
      // ...
      console.log(statusMessage);
      setStatusMessage("Failed to send message! Please try again later.");
      statusMessage.className = "status-message failure";
      setTimeout(()=> {
        statusMessage.className = 'status-message'
      }, 5000)
    });
  };

我试图在useState中添加额外的className，如下所示，但是我不能使用"+“

<p className={"status-message" + (useStateVar && "success")}></p>

如果消息已成功发送，如何动态更改className？

谢谢。

Answer 1

如果要添加类名，还可以替换调用className的方式，例如：

statusMessage.className = "status-message failure";

您不应该调用className，而应该使用属性，如这一行。

statusMessage.attributes['class'].value = "status-message failure";