Я пытался выяснить, как отправить электронное письмо после отправки формы Redux.После нескольких дней поиска правильного решения я объединил некоторые из них, и вот результат.
СТОРОНА КЛИЕНТА:
Это компонент моей контактной формы:
import React from 'react'
import { Field, reduxForm } from 'redux-form'
class Info extends React.Component {
renderError({ error, touched }) {
if (touched && error) {
return <div>{error}</div>
}
}
renderInputField = ({ input, label, meta }) => {
return (
<div>
<input {...input} type="text" placeholder={label} />
{this.renderError(meta)}
</div>
);
};
onSubmit = (formValues) => {
this.props.onSubmit(formValues)
}
render() {
const { handleSubmit, pristine, submitting } = this.props
return (
<div>
<form onSubmit={handleSubmit(this.onSubmit)}>
<div>
<Field
name="nome"
component={this.renderInputField}
label="Nome *"
/>
</div>
<div>
<Field
name="cognome"
component={this.renderInputField}
label="Cognome *"
/>
</div>
<div>
<Field
name="email"
component={this.renderInputField}
label="Email *"
/>
</div>
<div>
<Field
name="azienda"
component={this.renderInputField}
label="Azienda"
/>
</div>
<div>
<Field
name="citta"
component={this.renderInputField}
label="Città / CAP / Provincia"
/>
</div>
<button type="submit" disabled={pristine || submitting}>Visualizza</button>
</form>
</div>
)
}
}
const validate = formValues => {
const errors = {}
if (!formValues.nome) {
errors.nome = "Aggiungi il nome"
}
if (!formValues.cognome) {
errors.cognome = "Aggiungi il cognome"
}
if (!formValues.email) {
errors.email = "Aggiungi l'email"
} else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(formValues.email)) {
errors.email = 'Email non valida'
}
return errors
}
export default reduxForm({
form: 'companyData',
destroyOnUnmount: false,
forceUnregisterOnUnmount: true,
validate
})(Info)
Это компонент, в котором используется контактная форма (родительская) и где я использую axios для отправки данных на мой сервер, работающий через порт 3001. Важной частью является метод handleFormSubmit:
import React from 'react'
import Data from '../components/form/Data'
import Calculation from '../components/form/Calculation'
import Info from '../components/form/Info'
import Details from '../components/form/Details'
import axios from 'axios'
class WizardForm extends React.Component {
constructor(props) {
super(props)
this.nextPage = this.nextPage.bind(this)
this.previousPage = this.previousPage.bind(this)
this.handleFormSubmit = this.handleFormSubmit.bind(this)
this.state = {
page: 1,
}
}
nextPage() {
this.setState({ page: this.state.page + 1 })
}
previousPage() {
this.setState({ page: this.state.page - 1 })
}
async handleFormSubmit(formValues) {
const name = formValues.nome
const surname = formValues.cognome
const email = formValues.email
const response = await axios.post('http://localhost:3001/send', {
name: name,
surname: surname,
email: email,
})
console.log(response)
}
render() {
const { page } = this.state
return (
<div>
{page === 1 && <Data onSubmit={this.nextPage} />}
{page === 2 && (
<Calculation
previousPage={this.previousPage}
nextPage={this.nextPage}
/>
)}
{page === 3 && (
<Info
onSubmit={this.handleFormSubmit}
/>
)}
{page === 4 && (
<div>
<Details />
</div>
)}
</div>
)
}
}
export default WizardForm
СТОРОНА СЕРВЕРА:
Это мой файл app.js, который запускается с помощью команды "node app.js":
const express = require('express');
const bodyParser = require('body-parser');
const nodemailer = require("nodemailer");
const cors = require('cors');
const app = express();
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({
extended: true
}));
app.use(cors());
app.post('/send', (req, res) => {
// create reusable transporter object using the default SMTP transport
let transporter = nodemailer.createTransport({
host: 'ssl0.ovh.net',
secure: true,
port: 465,
auth: {
user: 'matteo.schiatti@abstract-technology.com',
pass: 'g6vqUImUzJX_cw',
},
tls: {
rejectUnauthorized: false,
}
});
let name = req.body.name
let surname = req.body.surname
let email = req.body.email
let content = `name: ${name} \n surname: ${surname} \n email: ${email} `
// setup email data with unicode symbols
let mailOptions = {
from: '"John" <matteo.schiatti@abstract-technology.com>', // sender address
to: 'matteo.schiatti@gmail.com', // list of receivers
subject: 'This is a test', // Subject line
text: content, // plain text body
};
// send mail with defined transport object
transporter.sendMail(mailOptions, (error, info) => {
if (error) {
return console.log(error);
}
console.log('Message sent: %s', info.messageId);
});
});
app.use((request, response, next) => {
response.header("Access-Control-Allow-Origin", "*");
response.header("Access-Control-Allow-Headers", "Content-Type");
next();
});
const PORT = process.env.PORT || 3001;
app.listen(PORT, () => {
console.log(`App listening on port ${PORT}!`);
});
Со всем этим на электронную почтуотправлены, но у меня возникли некоторые проблемы:
1 - Я не могу получить console.log (ответ), в консоли ничего не отображается, письмо отправлено, но axios не дает мнеответ.Я пытался что-то искать, здесь говорится, что проблема в event.preventDefault ():
Сообщение Axios не получает ответ (ReactJS)
, ноhandleSubmit формы Redux уже использует protectDefault, и я также попытался использовать event.preventDefault () вместо handleSubmit, но ничего.Мне действительно нужно найти способ получить ответ, потому что мне нужно изменить статус «страницы», когда я получу положительный результат.Любая идея?
2- Письмо отправлено, но если я не перезагружаю страницу после (мне нужно, чтобы страница не перезагружалась, потому что мне нужны данные формы, которые хранятся в Redux), я получаю двойное письмо, поэтомучерез несколько минут отправляется еще одно идентичное письмо.
Было действительно трудно найти решение, потому что мне пришлось объединить разные руководства, чтобы что-то выяснить, надеюсь, у меня получится, и я смогу создать четкое пошаговое руководство для тех, кто захочет создать нечто подобное..
Надеюсь, я выложу всю информацию