使用 React.js + Express.js 发送电子邮件

Posted

技术标签:

【中文标题】使用 React.js + Express.js 发送电子邮件【英文标题】:Send an Email Using React.js + Express.js 【发布时间】:2016-08-29 06:35:21 【问题描述】:

我在 ES6 中使用 React.js 构建了一个 Web 应用程序。我目前想创建一个基本的“联系我们”页面并想发送一封电子邮件。我是 React 的新手,只是发现我实际上无法使用 React 本身发送电子邮件。我正在使用nodemailerexpress-mailer 关注本教程,但在将示例代码与我的 React 文件集成时遇到了一些困难。具体来说,调用node expressFile.js 有效,但我不知道如何将其链接到我的 React 前端。

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

快递员:https://www.npmjs.com/package/express-mailer

我的表单的 React 组件如下。我将如何编写一个 Express 文件,以便从我的 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;

【问题讨论】:

【参考方案1】:

点击按钮后,向您的 express 服务器执行 ajax POST 请求,即“/contactus”。 /contactus 可以从 post 数据中获取 email、主题和内容并发送到 mail 函数。

在反应中:

$.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
);

【讨论】:

通过代码示例提供更详细的答案将有助于 OP 感谢您的建议,这听起来会奏效!这也可能是一个愚蠢的问题,但现在,当我编译我的应用程序时,我只运行npm start。如何让我的 express 服务器同时运行? 你用 node: node expressFile.js 启动 express 服务器【参考方案2】:

@ryan-jenkin 完全正确。

或者,如果您没有/想要 jQuery 作为依赖项,您可以使用原生的fetch api。另外,我通常会设置我的表单,使每个输入都有一个状态,然后在字符串化的 blob 中使用该状态。

客户端(反应):

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>
  )

【讨论】:

使用 react-router 会使这个过程复杂化吗?我有一个反应路由器,从客户端获取,并在我的快递服务器上有一个帖子,但仍然收到 404 找不到路由。 @布莱克脸

以上是关于使用 React.js + Express.js 发送电子邮件的主要内容,如果未能解决你的问题,请参考以下文章

express.js 和 react.js cookie 保存到浏览器但不工作?

如何通过 Express JS 服务器使 React JS 和 Socket IO 连接在一起?

如何为 api 部署 node js express js,为前端部署 react js,为管理员部署 angular

使用 node.js 和 react.js 客户端启动一个 firebase 功能项目

Express.js - 可以找到我的路线

CRUD op Express.js Node.js Mysql 无法使用 MVC 插入