React Bootstrap使用EmailJs显示toast/modal成功发送

Question

我想要一个toast/modal通知一旦表单提交，现在只有"alert"消息。我希望它是这样的:

<div className="toast_modal">We've received your inquiry, we'll get back to you as soon as possible. Thank you!"</div>

下面是我的代码:

import {useState} from 'react';
import emailjs from 'emailjs-com';
const NameForm = () => {
const [showModal,setShowModal] = useState(false);
const sendEmail = (e) => {
e.preventDefault();
emailjs.sendForm('service_ID', 'template_ID', e.target, 'user_ID')
.then((result) => {
console.log(result.text);
setShowModal(true);
}, (error) => {
console.log(error.text);
});
e.target.reset();
}

return (
<div>
<h1 className="text-center text-md-left mb-3">Get in Touch</h1>
<form className="contact-form" onSubmit={sendEmail}>
<div className="form-group mb-0 py-3">
<textarea className="form-control custom--fields-mod text-the-primary" id="message" rows="3" placeholder="Message *" name="message" required></textarea>
</div>
<div className="form-group row py-2 mb-0">
<div className="col-md-6 text-center text-md-left py-2 py-md-0">
<input className="buttons-width float-md-right btn btn-dark-moderate-orange rounded-0" type="submit" value="SEND MESSAGE" />
</div>
</div>
</form>
{showModal && (
<div className="modal fade show d-block" tabIndex={-1}>
<div className="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div className="modal-content bg-white border border-the-primary">
<div className="modal-body text-center py-4">
<p>We've received your inquiry, we'll get back to you as soon as possible. Thank you!"</p>
<button type="button" class="btn btn-dark-moderate-orange px-5" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
)}
</div>
);

}
export default NameForm;

我试图在表单提交后实现toast/modal通知。

Answer 1

首先我建议您使用功能组件。要显示toast_modal，可以使用状态。然后使用此状态作为回报。

import {useState} from 'react';
import emailjs from 'emailjs-com';
const NameForm = () => {
const [showModal,setShowModal] = useState(false);
const sendEmail = (e) => {
e.preventDefault();
emailjs.sendForm('service_ID', 'template_ID', e.target, 'user_ID')
.then((result) => {
console.log(result.text);
setShowModal(true);
}, (error) => {
console.log(error.text);
});
e.target.reset();
}

return (
<div>
<h1 className="text-center text-md-left mb-3">Get in Touch</h1>
<form className="contact-form" onSubmit={sendEmail}>
<div className="form-group mb-0 py-3">
<textarea className="form-control custom--fields-mod text-the-primary" id="message" rows="3" placeholder="Message *" name="message" required></textarea>
</div>
<div className="form-group row py-2 mb-0">
<div className="col-md-6 text-center text-md-left py-2 py-md-0">
<input className="buttons-width float-md-right btn btn-dark-moderate-orange rounded-0" type="submit" value="SEND MESSAGE" />
</div>
</div>
</form>
{showModal && (
<div className="modal fade show d-block" tabIndex={-1}>
<div className="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div className="modal-content bg-white border border-the-primary">
<div className="modal-body text-center py-4">
<p>We've received your inquiry, we'll get back to you as soon as possible. Thank you!"</p>
<button type="button" onClick={() => setShowModal(false)} className="btn btn-dark-moderate-orange px-5" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
)}
</div>
);

}
export default NameForm;