Actualmente, si el usuario presiona enviar, la única forma de saber si funcionó es la animación de clic del botón, y solo estaría seguro si inspeccionara la página y viera el mensaje "OK" en la consola.
Me gustaría al menos borrar todos los campos de entrada para hacerles saber que funcionó. A continuación se muestra todo el componente Email.js por si acaso.
Espero que esta sea suficiente información para ayudarme, EmailJS ha sido muy útil y funciona maravillosamente, pero no es algo con lo que mis compañeros y yo tengamos experiencia, así que estoy un poco atascado.
import React, { useRef } from 'react'; import emailjs from '@emailjs/browser'; import { Link } from 'react-router-dom'; import './Email.css'; const Email = () => { const form = useRef(); const sendEmail = (e) => { e.preventDefault(); emailjs.sendForm(process.env.REACT_APP_SERVICE_ID, process.env.REACT_APP_TEMPLATE_ID, form.current, process.env.REACT_APP_USER_ID) .then((result) => { console.log(result.text); }, (error) => { console.log(error.text); }); }; return ( <div className="Email"> <div className="nav"> <Link to="/" className="Home">Home</Link> </div> <h1>Email Me!</h1> <form ref={form} onSubmit={sendEmail}> <div> <label>Name:</label> <input className="info-box" type="text" name="user_name" /> </div> <div> <label>Email:</label> <input className="info-box" type="email" name="user_email" /> </div> <div> <textarea placeholder="Message" name="message" className="Message"/> </div> <div classname="Button-container"> <input className="Button" type="submit" value="Send" /> </div> </form> <Link to="/resume" className="Back">Back</Link> </div> ); }; export default Email
Ponga una referencia en cada uno, y luego haga:
theRef.current.value = "";
Para cada uno, o vincule un estado a cada entrada que se ve en los documentos beta de React: https://beta.reactjs.org/learn/managing-state#reacting-to-input-with-state