如何解决在reactjs中提交表单时添加警报
在单击按钮后,我最难以尝试使警报弹出。我已经为此工作了一段时间,但似乎无法弄清楚我哪里错了。按照下面的代码,一切正常,但是警报不会显示。任何建议都将不胜感激。
import React,{useState} from 'react';
import { Redirect } from 'react-router-dom'
import { MDBContainer,MDBRow,MDBCol,MDBBtn,MDBIcon } from 'mdbreact';
import NavBar from "./NavBar";
import Footer from "./Footer";
import emailjs from 'emailjs-com';
import{ init } from 'emailjs-com';
function Contact() {
const [alertVisibility,setAlertVisibility ] = useState(false)
function sendEmail(e) {
e.preventDefault();
emailjs.sendForm('hidden','hidden',e.target,'hidden')
.then((result) => {
setAlertVisibility(true);
if (setAlertVisibility === true ) {
return(
<button class="closebtn">
Great,your message has been sent.</button>
)
}
});
e.target.reset();
};
return (
<div>
<NavBar />
<br />
<br />
<br />
<br />
<br />
<MDBContainer>
<MDBRow className = "formcontainer">
<MDBCol md="6">
<form onSubmit={sendEmail}>
<p className="h4 text-center mb-4">Fill in the information below to contact me!</p>
<br />
<label htmlFor="defaultFormContactNameEx" className="grey-text" > Your name </label>
<input required type="text" id="defaultFormContactNameEx" className="form-control" name="user_name" />
<br />
<label htmlFor="defaultFormContactEmailEx" className="grey-text"> Your email </label>
<input required type="email" id="defaultFormContactEmailEx" className="form-control" name="user_email"/>
<br />
<label htmlFor="defaultFormContactSubjectEx" className="grey-text"> Subject</label>
<input required type="text" id="defaultFormContactSubjectEx" className="form-control" name="user_subject" />
<br />
<label htmlFor="defaultFormContactMessageEx" className="grey-text"> Your message </label>
<textarea required type="text" id="defaultFormContactMessageEx" className="form-control" rows="7" name="message"/>
<div className="text-center mt-4">
<MDBBtn color="warning" outline type="submit">
Send
<MDBIcon far icon="paper-plane" className="ml-2" />
</MDBBtn>
</div>
</form>
</MDBCol>
</MDBRow>
</MDBContainer>
<br />
<br />
<Footer />
</div>
);
};
export default Contact;
解决方法
您正在使用useState函数更新alertVisibility,因此您的检查应针对 如果(alertVisibility === true){...
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。