我已经在ES6中使用React.js构建了一个Web应用程序。我目前要创建一个基本的“联系我们”页面,并希望发送电子邮件。我是React的新手,只是发现我实际上不能使用React本身发送电子邮件。我正在使用nodemailer,express- mailer但在将示例代码与我的React文件集成时遇到了一些困难。具体来说,调用是node expressFile.js可行的,但是我不知道如何将其链接到我的React前端。
nodemailer
express- mailer
node expressFile.js
Nodemailer:https://github.com/nodemailer/nodemailer
Express-mailer:https://www.npmjs.com/package/express- mailer
该表单的我的React组件如下。我将如何编写Express文件,以便从contactUs()React组件中的方法中调用它?谢谢!
contactUs()
import React from 'react'; import { Col, Input, Button, Jumbotron } from 'react-bootstrap'; class ContactView extends React.Component{ contactUs() { // TODO: Send the email here } render(){ return ( <div> <Input type="email" ref="contact_email" placeholder="Your email address"/> <Input type="text" ref="contact_subject" placeholder="Subject"/> <Input type="textarea" ref="contact_content" placeholder="Content"/> <Button onClick={this.contactUs.bind(this)} bsStyle="primary" bsSize="large">Submit</Button> </div> ) } }; export default ContactView;
单击该按钮后,向您的Express服务器(即“ / contactus”)执行ajax POST请求。/ contactus可以从帖子数据中提取电子邮件,主题和内容,然后发送到邮件功能。
在React中:
$.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) });
在express中,在express post处理程序内添加nodemailer代码:
app.post('/contactus', function (req, res) { // node mailer code });