Senden Sie eine E-Mail mit React.js + Express.js

Question

Ich habe eine Web-App mit React.js in ES6 erstellt. Ich möchte derzeit eine grundlegende "Kontakt" -Seite erstellen und möchte eine E-Mail senden. Ich bin neu in React und habe gerade festgestellt, dass ich mit React selbst keine E-Mail versenden kann. Ich folge dem Tutorial mit nodemailer und express-mailer, hatte aber einige Schwierigkeiten, den Beispielcode mit meinen React-Dateien zu integrieren. Genauer gesagt funktioniert der Aufruf von node expressFile.js, aber ich habe keine Ahnung, wie ich dies mit meinem React-Frontend verbinden soll.

Nodemailer: https://github.com/nodemailer/nodemailer

Express-Mailer: https://www.npmjs.com/package/express-mailer

Meine Reagieren Komponente für das Formular unten. Wie würde ich eine Express-Datei schreiben, so dass sie von der Methode contactUs() in meiner React-Komponente aufgerufen wird? Vielen Dank!

Answer 1

Wenn Sie auf die Schaltfläche klicken, führen Sie eine AJAX-POST-Anfrage an Ihren Express-Server aus, d. H. "/ Contactus"./contactus kann die E-Mail, den Betreff und den Inhalt aus den Postdaten abrufen und an die E-Mail-Funktion senden.

In Reaktion:

$.ajax({ 
    url: '/contactus', 
    dataType: 'json', 
    cache: false, 
    success: function(data) { 
     // Success.. 
    }.bind(this), 
    error: function(xhr, status, err) { 
     console.error(status, err.toString()); 
    }.bind(this) 
}); 

In Express innerhalb einer Eilpfosten Handler den nodemailer Code hinzu:

app.post('/contactus', function (req, res) { 
    // node mailer code 
}); 

Answer 2

@ ryan-jenkin völlig korrekt ist.

Alternativ können Sie, wenn Sie jQuery nicht als Abhängigkeit haben/wollen, die native fetch api verwenden. Außerdem richte ich normalerweise mein Formular so ein, dass jede Eingabe einen Status hat, und verwende diesen Status dann im stringifizierten Blob.

Clientseitige (Reagieren):

handleSubmit(e){ 
    e.preventDefault() 

    fetch('/contactus', { 
    method: 'POST', 
    headers: { 
     'Accept': 'application/json', 
     'Content-Type': 'application/json', 
    }, 
    body: JSON.stringify({ 
     email: this.state.email, 
     // then continue this with the other inputs, such as email body, etc. 
    }) 
    }) 
    .then((response) => response.json()) 
    .then((responseJson) => { 
    if (responseJson.success) { 
     this.setState({formSent: true}) 
    } 
    else this.setState({formSent: false}) 
    }) 
    .catch((error) => { 
    console.error(error); 
    }); 
} 

render(){ 
    return (
    <form onSubmit={this.handleSubmit} > 
     <input type="text" name="email" value={this.state.email} /> 
     // continue this with other inputs, like name etc 
    </form> 
) 
}