将数据从React表单发送到Nodemailer

时间:2018-06-14 21:08:00

标签: javascript reactjs webpack nodemailer

我很难将表单的输入数据我的 React 表单发送到Nodemailer 文件,因此可以将它们发送到我的电子邮件地址。

我使用webpack 4创建一个bundle.js文件,并使用 webpack-dev-server

创建localhost服务器

我已经阅读了大量的教程,但每个人似乎都采用了不同的方式,所以很容易让人感到困惑。我是React的新手并且编程不到一年,所以我遇到了很多困难。你们会帮我解决这个问题吗? :)

的package.json

 {
"name": "personal_webpage",
"version": "1.0.0",
"description": "Company website",
"main": "main.js",
"scripts": {
  "start": "webpack-dev-server --output-public-path=/contactForm-bundle/ --open --mode production",
  "build": "webpack --mode production"
 },
"author": "Dominik Kohlman",
"license": "ISC",
"devDependencies": {
  "babel-core": "^6.26.3",
  "babel-loader": "^7.1.4",
  "babel-preset-env": "^1.7.0",
  "babel-preset-react": "^6.24.1",
  "html-loader": "^0.5.5",
  "html-webpack-plugin": "^3.2.0",
  "nodemailer": "^4.6.6",
  "npm": "^6.1.0",
  "react": "^16.4.0",
  "react-dom": "^16.4.0",
  "webpack": "^4.11.1",
  "webpack-cli": "^3.0.3",
  "webpack-dev-server": "^3.1.4"
},
"dependencies": {}
 }

webpack.config.js

var path = require('path');

module.exports = {
    entry: {
      app: './src/contactForm/main.js'
  },
    output: {
      path: path.resolve(__dirname, 'contactForm-bundle'),
      filename: 'bundle.js'
  },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use:'babel-loader'
        },
        {
          test: /\.html$/,
          use:'html-loader'
        }
      ]
    }
  };

presenter.js

我将表单的输入数据存储在另一个文件( main.js )的状态中,然后将它们与props一起传递给presenter.js

import React from 'react';

export class Presenter extends React.Component {
    constructor(props){
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleSubmit(e) {
        e.preventDefault(); // prevent from showing input's value in URL

        const { firstNameErr, lastNameErr, emailErr, telErr, messageErr } = this.props;

        if( (firstNameErr===false && lastNameErr===false &&
            emailErr===false && telErr===false && messageErr===false) ){ // if inputs have no errors

                 **Pass form's input data to Nodemailer from here**


    } else {
        document.getElementById("errorMessage").style.visibility = "visible";
        }
    };

    render() {
        return (
            <form onSubmit={this.handleSubmit} id="form">
              .
              .
              .    
            </form>
        );
    }
 }

nodemailer.js

var nodemailer = require('nodemailer');


let transporter = nodemailer.createTransport({
    service: 'gmail',
    secure: false,
    auth: {
        user: 'dominik.kohlman@gmail.com',
        pass: '****'
    }
  });

let emailOptions = {
    from: '<dominik.kohlman@gmail.com>',
    to: 'dominik.kohlman@gmail.com',
    replyTo: 'form email data',
    subject: 'Email from customer'+ ' form email data',
    html: 'form data'
  };

transporter.sendMail(emailOptions, (error, info) => {
    if(error) {
        return console.log(error);
    } else {
        console.log("The message has been sent!");
        console.log(info);
    }
  });

0 个答案:

没有答案