Отправить данные из формы React в Nodemailer

Мне трудно отправить входные данные формы из мой файл Реагировать формы в Nodemailer, чтобы их можно было отправить на мой адрес электронной почты.

Я использую webpack 4 для создания одного файла bundle.js и создаю локальный сервер с webpack-dev-сервер

Я прочитал много руководств, но кажется, что все делают это по-своему, так что это довольно сбивает с толку. Я новичок в 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), и они передаются с реквизитами в 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: '[email protected]',
        pass: '****'
    }
  });

let emailOptions = {
    from: '<[email protected]>',
    to: '[email protected]',
    replyTo: 'form email data',
    subject: 'Email from customer'+ ' form email data',
    html: 'form data'
  };

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

Объясни подробней. С какой проблемой вы столкнулись. Ваш вопрос в основном закодирован, без пояснений.

karthik shankar 15.06.2018 07:06

@karthikshankar Я создаю веб-страницу компании с контактной формой, чтобы пользователи могли связаться со мной. Форма работает хорошо, за исключением той части, когда мне нужно отправить электронное письмо со всеми входными данными пользователя после нажатия кнопки отправки. Я не знаю, как передать входные данные в файл nodemailer.js, который включает логику nodemailer, которая отправляет фактическое электронное письмо. Файл Nodemailer.js сам по себе работает хорошо, но я не знаю, как передать ему входные данные. Я читал, что это можно сделать с помощью fetch api, но в этих руководствах они отправляют данные на сервер. Мне это нужно только для отправки данных в файл nodemailer.js.

dknvmlhok 15.06.2018 12:04
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
400
0

Другие вопросы по теме