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



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


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