[英]Pop up message when form is submitted
I have a form on my website that connects to a backend DB-- so users can input their contact information.我的网站上有一个连接到后端数据库的表单——因此用户可以输入他们的联系信息。 I want the users to be validated with a "You have been added" flash message when their information is added.
我希望用户在添加信息时通过“您已被添加”flash 消息进行验证。 I have everything set up with CSS (the flash message components lights up for 5 seconds when the page is loaded) but I can't seem to get the message up to pop up when the form is submitted.
我用 CSS 设置了所有内容(页面加载时 flash 消息组件亮起 5 秒)但我似乎无法在提交表单时弹出消息。
Form component:表单组件:
import React, { useState } from "react";
import Axios from "axios";
import "./form.css";
import FlashMessages from "../flashMessages";
function ContactInput(props) {
const [username, setUsername] = useState();
const [email, setEmail] = useState();
//const [password, setPassword] = useState();
async function handleSubmit(e) {
e.preventDefault();
try {
await Axios.post("(URLOFMYBACKENDAPIDB)/register", { username, email, password: "********" });
console.log("user was successfully created");
} catch (e) {
console.log("there was an error");
}
}
return (
<div className="mainDiv">
<form onSubmit={handleSubmit}>
<div className="inputDiv">
<label>Name</label>
<input className="inputField" onChange={e => setUsername(e.target.value)} type="text" name="username"></input>
</div>
<div className="inputDiv">
<label>Email</label>
<input className="inputField" onChange={e => setEmail(e.target.value)} type="text" email="Email"></input>
</div>
{/* <div>
<label>Password </label>
<input onChange={e => setPassword(e.target.value)} type="text" email="email"></input>
</div>
*/}
<div>
<input type="submit" className="inputButton" value="Submit"></input>
</div>
</form>
<FlashMessages />
</div>
);
}
export default ContactInput;
The flash message component: flash消息组件:
import React from "react";
function FlashMessages() {
return (
<div className="floating-alerts">
<div className="alert alert-success text-center floating-alert shadow-sm">You have been successfully added!</div>
</div>
);
}
export default FlashMessages;
React has a useState hook , in your example using it could look like this: React 有一个useState hook ,在您使用它的示例中可能如下所示:
// On top of the Component
const [flashMessage, setFlashMessage] = useState(false);
// Submit method
async function handleSubmit(e) {
e.preventDefault();
try {
await Axios.post("(URLOFMYBACKENDAPIDB)/register", { username, email, password: "********" });
console.log("user was successfully created");
setFlashMessage(true);
} catch (e) {
console.log("there was an error");
}
}
In the render tree you would check if flashMessage
is true
and then render the component:在渲染树中,您将检查
flashMessage
是否为true
,然后渲染组件:
{flashMessage? <FlashMessage /> :null}
You basically need to set a state for tracking the success of login您基本上需要设置一个 state 来跟踪登录成功
const [flashMessage, setFlashMessage] = useState(false)
keep it false so flashmessage does'nt appear from start保持错误,这样一开始就不会出现闪现信息
and you can set the state, flashMessage to true when user login successfully当用户登录成功时,你可以设置 state, flashMessage 为 true
async function handleSubmit(e) {
e.preventDefault();
try {
await Axios.post("(URLOFMYBACKENDAPIDB)/register", { username, email,
password: "********" });
console.log("user was successfully created");
setFlashMessage(true)
} catch (e) {
console.log("there was an error");
}
} }
and then in your code render the flashmsg this way然后在您的代码中以这种方式呈现 flashmsg
{ flashMessage ? <FlashMessages /> : "" }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.