使用React.js + Express.js发送电子邮件 [英] Send an Email Using React.js + Express.js

问题描述

我在ES6中使用React.js构建了一个Web应用程序。我目前想要创建一个基本的联系我们页面，并希望发送电子邮件。我是React的新手，刚刚发现我实际上无法使用React本身发送电子邮件。我正在使用 nodemailer 和 express-mailer 来学习本教程，但在将示例代码与我的React集成时遇到了一些困难文件。具体来说，调用节点expressFile.js 有效，但我不知道如何将它链接到我的React前端。

I have built a web app using React.js in ES6. I currently want to create a basic "Contact Us" page and want to send an email. I am new to React and just discovered that I cannot actually send an email using React itself. I'm following the tutorial with nodemailer and express-mailer but have had some difficulty integrating the example code with my React files. Specifically, calling node expressFile.js works, but I have no idea how to link this to my React front-end.

节点制作者： https://github.com/nodemailer/ nodemailer

快递邮件： https://www.npmjs.com/package/express-mailer

表格的My React组件如下。我如何编写Express文件，以便从我的React组件中的 contactUs（）方法调用它？谢谢！

My React component for the form is below. How would I write an Express file so that it is called from the contactUs() method in my React component? Thanks!

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;

推荐答案

单击该按钮时，执行ajax POST请求到您的快递服务器，即/ contactus。 / contactus可以从帖子数据中提取电子邮件，主题和内容并发送到邮件功能。

When the button is clicked, execute an ajax POST request to your express server, i.e "/contactus". /contactus can fetch the email, subject, and content out of the post data and send to the mail function.

在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中，在明确的邮政处理程序中添加nodemailer代码：

In express add the nodemailer code within an express post handler:

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

这篇关于使用React.js + Express.js发送电子邮件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！