Soy nuevo en el desarrollo web en general, pero estoy tratando de crear mi propia página de contacto en mi sitio web y tengo problemas. Estoy usando React, Gatsby y Emailjs. Tengo mi formulario configurado para que las entradas pasen al estado onChange. Luego tengo un botón de "enviar mensaje" que debería enviar un correo electrónico usando EmailJS usando los tokens y las variables de estado. Esto hace todo el trabajo y el correo electrónico se envía con éxito , pero está enviando docenas de correos electrónicos. Creo que lo que sucede es que llama a sendEmail cada vez que se establece el estado y el DOM se vuelve a representar, o básicamente una vez por cada carácter que se ingresa en los campos, pero no sé por qué.
Puntos de bonificación si puede ayudarme a descubrir por qué presionar el botón Enviar mensaje también me envía a una ruta 404 / # en mi sitio.
import React from 'react' import emailjs from 'emailjs-com class Main extends React.Component { constructor(){ super() this.state = { fromName:'', message:'', fromEmail:'' } } render() { return ( <div ... > ... <article> ... <form method="post" action="#"> <div className="field half first"> <label htmlFor="name">Name</label> <input type="text" name="name" id="name" value={this.state.fromName} onChange={e => this.setState({fromName: e.target.value})}/> </div> <div className="field half"> <label htmlFor="email">Email</label> <input type="text" name="email" id="email" value={this.state.fromEmail} onChange={e => this.setState({fromEmail: e.target.value})}/> </div> <div className="field"> <label htmlFor="message">Message</label> <textarea name="message" id="message" rows="4" value={this.state.message} onChange={e => this.setState({message: e.target.value})} placeholder = "..."></textarea> </div> <ul className="actions"> <li> <input type="submit" value="Send Message" className="special" onClick={this.sendEmail()}/> </li> </ul> </form> </article> </div> ) } sendEmail() { const serviceId='...' const templateId='...' const userId='...' emailjs.send(serviceId, templateId, this.state, userId) } } export default MainEl problema es que nunca siguió bien la documentación de emailjs y nunca evitó la acción del formulario predeterminado. De acuerdo con la documentación de emailjs, debería haber configurado la función onClick con la función de envío de correo electrónico (sin invocarla) en la etiqueta de apertura del formulario NO en su botón de envío. (pero el botón sigue siendo necesario para que pueda enviar la señal de que se debe enviar el formulario). También invocó la función sendEmail que es inapropiada y genera problemas. También debe agregar un evento como parámetro en su función sendEmail al crear esta función. Luego, dentro de la función sendEmail, llama a la función event.preventDefault() .
import React from 'react' import emailjs from 'emailjs-com class Main extends React.Component { constructor(){ super() this.state = { fromName:'', message:'', fromEmail:'' } } render() { return ( <div> <article> <form method="post" onClick={this.sendEmail} action="#"> <div className="field half first"> <label htmlFor="name">Name</label> <input type="text" name="name" id="name" value={this.state.fromName} onChange={e => this.setState({fromName: e.target.value})}/> </div> <div className="field half"> <label htmlFor="email">Email</label> <input type="text" name="email" id="email" value={this.state.fromEmail} onChange={e => this.setState({fromEmail: e.target.value})}/> </div> <div className="field"> <label htmlFor="message">Message</label> <textarea name="message" id="message" rows="4" value={this.state.message} onChange={e => this.setState({message: e.target.value})} placeholder = "..."></textarea> </div> <ul className="actions"> <li> <input type="submit" value="Send Message" className="special"/> </li> </ul> </form> </article> </div> ) } sendEmail(event) { event.preventDefault(); const serviceId='...' const templateId='...' const userId='...' emailjs.send(serviceId, templateId, this.state, userId) .then((result) => { console.log(result.text); }, (error) => { console.log(error.text); }); } } export default Main