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

  • Z时代
  • 2024-01-10
  • 分类：问答

我已经在ES6中使用React.js构建了一个Web应用程序。我目前要创建一个基本的“联系我们”页面，并希望发送电子邮件。我是React的新手，只是发现我实际上不能使用React本身发送电子邮件。我正在使用nodemailer，express-

mailer但在将示例代码与我的React文件集成时遇到了一些困难。具体来说，调用是node

expressFile.js可行的，但是我不知道如何将其链接到我的React前端。

Nodemailer：https：//github.com/nodemailer/nodemailer

Express-mailer：https：//www.npmjs.com/package/express-

mailer

该表单的我的React组件如下。我将如何编写Express文件，以便从contactUs()React组件中的方法中调用它？谢谢！

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

以上是 使用React.js + Express.js发送电子邮件 的全部内容， 来源链接： utcz.com/qa/422645.html

回到顶部