我很难将表单的输入数据从我的 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);
}
});