Как интегрировать Express и React для отправки электронного письма

Question

Я пытаюсь объединить форму, созданную с помощью React.js, и «внутреннюю сторону» для отправки электронного письма из Express.Я не уверен, как отправить отформатированное тело формы или какой метод следует использовать для выполнения HTTP-запроса.

У меня есть React.js и Express.js в двух разных папках.Я настроил express-mailer и использовал Почтальон для проверки запросов, и они отлично работают.

Это мой экспресс-код:

require('dotenv').config();
const express = require('express');
const logger = require('morgan');
const mailer = require('express-mailer');
const path = require('path');
const bodyParser = require('body-parser');
const cors = require('express-cors');
const server = express();


// Configuration
server.set('PORT', process.env.SERVER_PORT || 5000);
server.set('views', path.join(__dirname, 'views'));
server.set('view engine', 'jade');
server.use(logger('combined'));
server.use(bodyParser.urlencoded({ extended: false }));
server.use(cors({
    allowedOrigins: [
        'localhost:3000'
    ]
}));

mailer.extend(server, {
    from: process.env.EMAIL_FROM,
    host: process.env.EMAIL_HOST,
    secureConnection: process.env.EMAIL_SECURE,
    port: process.env.EMAIL_PORT,
    transportMethod: process.env.EMAIL_METHOD,
    auth: {
        user: process.env.EMAIL_FROM,
        pass: process.env.EMAIL_PASSWORD
    }
});

server.post('/contact', (req, res) => {
    server.mailer.send('email', {
        to: process.env.EMAIL_FROM,
        subject: `Contact ${req.body.subject}`,
        body: req.body
    }, err => {
        if (err) {
            console.log(err);
            res.send({ success: false, message: err });
        } else {
            res.send({ success: true, message: 'Message sent' });
        }
    });
});

server.listen(server.get('PORT'), () => {
    console.log('Server started on port', server.get('PORT'));
})

А это мой код формы:

import React, { Component } from 'react';
import {
    Container,
    Form,
    Button,
    Alert
} from 'react-bootstrap';

class Contact extends Component {
    constructor(props) {
        super(props);

        this.state = {
            modal: {
                visible: false,
                type: '',
                message: ''
            }
        };

        this.sendEmail = this.sendEmail.bind(this);
    }

    sendEmail(evt) {
        evt.preventDefault();

        const data = {
            name: evt.target.elements.name.value,
            email: evt.target.elements.email.value,
            subject: evt.target.elements.subject.value,
            message: evt.target.elements.message.value
        };

        fetch('http://localhost:5000/contact', {
            method: 'POST',
            body: JSON.stringify(data)
        })
        .then(res => res.json())
        .then(data => {
            if (data.success) {
                this.setState({
                    modal: {
                        type: 'success'
                    }
                });
            } else {
                this.setState({
                    modal: {
                        type: 'danger'
                    }
                });
            }
            this.setState({
                modal: {
                    visible: true,
                    message: data.message
                }
            });
        });

    }

    render() {
        return (
            <Container>
                <Alert variant={this.state.modal.type} dismissible style={{ display: this.state.modal.visible ? 'visible' : 'none' }}>
                    {this.state.modal.message}
                </Alert>
                <Form onSubmit={this.sendEmail}>
                    <Form.Group controlId="name">
                        <Form.Label>Name</Form.Label>
                        <Form.Control type="text" placeholder="Jhon" />
                    </Form.Group>
                    <Form.Group controlId="email">
                        <Form.Label>Email address</Form.Label>
                        <Form.Control type="email" placeholder="john@email.com" />
                    </Form.Group>
                    <Form.Group controlId="subject">
                        <Form.Label>Subject</Form.Label>
                        <Form.Control as="select">
                            <option>Budget</option>
                            <option>IT</option>
                        </Form.Control>
                    </Form.Group>
                    <Form.Group controlId="message">
                        <Form.Label>Message</Form.Label>
                        <Form.Control as="textarea" placeholder="Message" rows={10} />
                    </Form.Group>

                    <Button variant="primary" type="submit">Send</Button>
                </Form>
            </Container>

        );
    }
}

export default Contact;

Я думаю, мне нужно как-то отправить объект req.body из функции React sendEmail() на сторону Express, чтобы обработать данные и затем отправить электронное письмо.

Пока я получаю пустой объектв моей «внутренней стороне», но, возможно, я должен использовать http для Nodejs, axios или r2.Есть идеи?

Answer 1

Похоже, вашей проблемой является отсутствие атрибутов name в ваших HTML-элементах.

См. ТАК для более подробной информации.Короче говоря:

имя используется на стороне сервера, это необходимо, если вы планируете обработать поле.Идентификатор id используется только для того, чтобы элементы меток при щелчке и доступе программ чтения с экрана могли запускать / вызывать элементы управления формы (ввод, выбор).