Блог

Я пытаюсь создать «Контактную форму», используя «EamilJS» на своей веб-странице, которая была создана в React.js. Все работает нормально, но он возвращает ошибку, когда я добавляю «динамическое имя класса».

Цель этих динамических имен классов-показать сообщение об успешном выполнении после отправки сообщения пользователя. (Я имею в виду Блог: 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>
 

Итак, имя класса

следует обновить либо «статус-сообщение успешно», либо «статус-сообщение».

 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)
    });
  };
 

Я попытался использовать значение, чтобы добавить дополнительное имя класса, как показано ниже, но не смог использовать» «.

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

Как я могу динамически изменить имя класса, если сообщение успешно отправлено?

Спасибо.