【发布时间】：2022-02-08 18:08:38
【问题描述】：
我正在使用 React.js 和 emailjs 制作联系表单，但我输入了一个显示“消息已发送！！”的表单发送消息后显示“发送消息失败！”无法发送消息时。我想让它出现在顶部，但我当时有点卡在CSS样式方法上。
JS
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;
}
}
当我使用上面的代码运行它时，.status-message css 似乎正在工作并且文本没有出现在表单中，但是当我事先切断 wifi 并发送它时（“发送消息失败”我想显示消息“！...） .failure css 不起作用，没有任何显示。 当我将 .status-message 的不透明度设置为 1 并执行相同操作时，它会在提交前在表单上显示“消息”，并在提交后更改为“发送消息失败！...”。 .. 所以我认为函数本身已经完成，但它充满了如何使 css 工作。 此外，当我尝试发送它时，我在检查控制台中收到错误“未捕获的类型错误（承诺中）：无法在字符串'消息'上创建属性'类名'”，但它可以工作。 并且，在.then上使用reset()，这样Form可以在提交后将表单返回到输入消息之前的状态，但即使在提交之后消息仍然存在。
谢谢。
【问题讨论】：
标签： javascript css reactjs email