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

Question

我想要在表单提交后收到 toast/modal 通知，现在它是唯一的“警告”消息。我想要这样：

<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，您可以使用状态。然后在return.

中使用这个状态

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;

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

React Bootstrap using EmailJs show toast/modal on successful sent

javascript

reactjs

react-bootstrap