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

IT技术 javascript node.js email express reactjs
2021-05-18 01:24:08

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

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

快递邮件：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;
2个回答

当按钮被点击时，执行一个ajax POST 请求到你的express 服务器，即“/contactus”。/contactus 可以从 post 数据中提取电子邮件、主题和内容并发送到邮件功能。

在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 代码到一个 express post 处理程序中：

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

@ryan-jenkin 是完全正确的。

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

客户端（react）：

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>
  )
}
其它你可能感兴趣的问题
上一篇如何处理需要子组件状态的流星数据？ 下一篇无论我怎么尝试都无法打印