javascript - 将数据从 React 表单发送到 Nodemailer

Question

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

我使用 webpack 4 创建一个 bundle.js 文件并使用webpack-dev-server创建 localhost 服务器

我已经阅读了很多教程，但是每个人的做法似乎都不一样，所以这很令人困惑。我是 React 的新手，并且编程不到一年，所以我被卡住了很多。你们会帮我解决这个问题吗？:)

包.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'
        }
      ]
    }
  };

演示者.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: '[e-mail]',
        pass: '****'
    }
  });

let emailOptions = {
    from: '<[e-mail]>',
    to: '[e-mail]',
    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);
    }
  });

标签： javascriptreactjswebpacknodemailer