Question

我一直试图弄清楚提交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（response），控制台中什么也没有出现，邮件已发送，但是axios没有给我响应。我尝试搜索某些内容，在这里它说问题出在event.preventDefault（）：

Axios post doesn't receive answer (ReactJS)

但是Redux Form的handleSubmit已经使用了preventDefault，我也尝试使用event.preventDefault（）代替handleSubmit但什么也没有。我确实需要找到获得响应的方法，因为当我获得肯定的结果时，我需要更改“页面”状态。任何想法？

2-已发送电子邮件，但是如果我之后不重新加载页面（我需要不重新加载页面，因为我需要存储在Redux中的表单数据），我会收到一封重复的电子邮件，因此几分钟后将发送另一封相同的电子邮件。

找到解决方案真的很困难，因为我必须合并不同的指南才能弄清楚某些事情，希望我能解决这个问题，以便为谁想要构建类似的东西创建清晰的分步指南。

希望我将所有信息

Answer 1

1。

    Public Sub Export_TopbarToExcel()

    Dim xlApp As Excel.Application
    Dim xlBook As Excel.Workbook
    Dim xlSheet As Excel.Worksheet
    Dim t As Task
    Dim pj As Project

    Set pj = ActiveProject
    Set xlApp = New Excel.Application

    xlApp.Visible = True
    'applies filter in project
    FilterApply Name:="TopBarReport"
    'selects filtered tasks and copies them
    SelectAll
    EditCopy

    'adds new workbook
    Set xlBook = xlApp.Workbooks.Add
    Set xlSheet = xlBook.Worksheets(1)

    'Add the project header info in the top 2 rows
    xlSheet.Cells(1, 1).Value = "Status Date"
    xlSheet.Cells(1, 2).Value = pj.StatusDate
    xlSheet.Cells(1, 3).Value = "Project Title"
    xlSheet.Cells(1, 4).Value = pj.Title
    'here is where the issue is...it is not pasting the selected info here
    xlSheet.Activate
        Range("A3").Activate
        EditPaste

    MsgBox "Done", vbInformation

    End Sub

在状态为200以及状态不同的情况下，您可以在Express.js中通过API发送响应。实际上，当您进行触发时，您可以执行以下操作。

   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,
        }).then((response)=> console.log(response)
    }

2。Redux表单已经使用了preventDefault，因此您无需调用它。我认为您的Redux表单代码有误

使用React，Redux Form，Nodemailer和Express发送电子邮件

1 个答案: