文章/答案/技术大牛

发布

社区首页 >问答首页 >我想在按“发送”按钮时显示消息。并希望被重置消息形式

问我想在按“发送”按钮时显示消息。并希望被重置消息形式
EN

Stack Overflow用户

提问于 2022-02-08 09:52:58

回答 1查看 164关注 0票数 0

我正在使用React.js和电子邮件制作一个联系人表单，但是我输入了一个表单，上面写着“消息发送了！”在发送消息后，“发送消息失败！”当消息无法发送时。我想让它出现在顶部，但我在CSS样式方法在那个时候有点笨重。

    import React, { useState } from "react";
    import { useForm } from "react-hook-form";
    import "./Contact.css";
    import { init, send } from 'emailjs-com';
    init('MY USER ACCOUNT');
    
    const Contact = () => {
    
      const [contactNumber, setContactNumber] = useState('000000')
      const [statusMessage, setStatusMessage] = useState('message')
      const generateContactNumber = () => {
        const numStr = '000000' + (Math.random() * 1000000 | 0);
        setContactNumber(numStr.substring(numStr.length - 6))
      }

  const { register, handleSubmit, watch, formState: { errors } } = useForm();
  const onSubmit = (data) => {
    const form = document.querySelector('#contact-form')
    generateContactNumber();
    send('service', 'template', data)
      .then(function (response) {
        console.log('SUCCESS!', response.status, response.text);
        setStatusMessage("Message sent!!")
        statusMessage.className = 'status-message success' 
        setTimeout(() => {
          statusMessage.className = 'status-message'
        }, 5000)
        form.reset();


      }, function (error) {
        console.log('FAILED...', error);
        setStatusMessage('Failed to send message! Please try again :-(')
        statusMessage.className = "status-message failure"
        setTimeout(() => {
          statusMessage.className = 'status-message'
        }, 5000)
      })
  }

  const message = watch('message') || "";
  const messageCharsLeft = 1500 - message.length;

  return (

    <body>
    
      <div className="Contact" >
        <h1>Contact me</h1>
        <p>Please talk me any question if you have </p>
        <p className="status-message">{statusMessage}</p>
      </div>

      <form id='contact-form' onSubmit={handleSubmit(onSubmit)} >
        <input type='hidden' name='contact_number' value={contactNumber} />

        {errors.user_name && errors.user_name.type === "required" && (
          <div role="alert">Name is required<br /></div>)}
        <input type='text' name='user_name' placeholder='Name' maxLength='30'
          aria-invalid={errors.user_name ? "true" : "false"}{...register("user_name", ({ required: true }))} />
        <br />

        {errors.user_email && errors.user_email.type === "required" && (
          <div role="alert">Email is required<br /></div>)}
        <input type='email' name='user_email' placeholder='Email'{...register("user_email", ({ required: true }))} />
        <br />

        {errors.message && errors.message.type === "required" && (
          <div role="alert">Message is required<br /></div>)}
        <textarea name='message' {...register("message", ({ required: true }))} placeholder='Message' maxLength='1500' />
        {/* <p className='message-chars-left'>{messageCharsLeft}</p> */}
        <br />

        <input type='submit' className="submit" value='Send' />
      </form>
      
    </body>
  )
}

CSS

body{
  background-color: black;
 
}


input, textarea{
  margin-bottom: 20px;
  width: 600px;
  
}

textarea {
  height: 10em;
  width: 600px;
}

div[role='alert'] {
  color: red;
  margin-top: 5px;
  font-size: larger;
}

.message-chars-left {
  width: 600px;
  margin: auto;
  text-align: left;
}

.Contact h1{
  font-size: 2em;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
  'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
  sans-serif;
  color: aliceblue;
  font-weight:900;
}
.Contact p{
  font-size: 2em;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
  'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
  sans-serif;
  color: aliceblue;
}

.submit:hover{
  background:rgb(176, 180, 180);
  transition: 0.5 s;
}

.status-message {
  opacity: 0;
  text-align: center;
  font-size: 1.0em;
  transition: 0.3;
}

.success{
  opacity: 1;
  color: green;
}

.failure{ 
  opacity: 1;
  color: red;
}

@media screen and (max-width: 480px) { 
  .Contact h1 {
    width: 100%;
    font-size: x-large;
  }
}
@media screen and (max-width: 480px) { 
  .Contact p {
    width: 100%;
    font-size: x-large;
  }
}

@media screen and (max-width: 480px) { 
  input{
    width: 360px;
    
  }
}

@media screen and (max-width: 480px) { 
  textarea {
    width: 360px;
    
  }
}

当我使用上面的代码运行它时，. seems似乎在工作，文本没有出现在表单中，但是当我预先切断wifi并发送它时(“未能发送消息”，“我想显示消息”！).failure css不工作，什么也没有出现。当我将. same的不透明度设置为1并执行相同的操作时，它会在表单上显示提交前的"message“，并将其更改为”未能发送消息！“在提交之后。。。所以我认为这个函数本身已经完成了，但是它充满了如何使css工作的内容。另外，当我试图发送它时，我会得到一个错误："Uncaught type error (在承诺中)：无法在字符串‘message’上创建属性'class name‘“，但是它可以工作。并且，在.then上使用reset()，这样表单可以在提交后输入消息之前将表单返回到状态，但是消息在提交之后仍然保持不变。

谢谢。

javascript

css

reactjs

回答 1

Stack Overflow用户

发布于 2022-02-08 10:08:38

您正在将.className属性设置为字符串，而字符串没有该属性。这就是为什么你会得到类型错误。它只会阻止你的终结者被处决。例如，您的表单是否在成功时重置？不应该这样。

相反，您需要做的是引入一些新的布尔状态，一个表示成功，另一个表示错误。现在，在包含状态消息的<p>标记中，测试那些布尔值。如果成功为真，则将success类应用于<p>标记。同样的错误。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/71031764

复制

相似问题

问我想在按“发送”按钮时显示消息。并希望被重置消息形式
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我想在按“发送”按钮时显示消息。并希望被重置消息形式EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问我想在按“发送”按钮时显示消息。并希望被重置消息形式
EN