Отправить по электронной почте Использование React.js + Express.js

Question

Я создал веб-приложение с использованием React.js в ES6. В настоящее время я хочу создать базовую страницу «Связаться с нами» и вы хотите отправить электронное письмо. Я новичок в React и только что обнаружил, что я действительно не могу отправить электронное письмо, используя React. Я следую учебнику с nodemailer и express-mailer, но с некоторыми трудностями интегрировал пример кода с моими файлами React. В частности, работает node expressFile.js, но я понятия не имею, как связать это с моим интерфейсом React.

Nodemailer: https://github.com/nodemailer/nodemailer

Экспресс-почтовик: https://www.npmjs.com/package/express-mailer

Мой Реагировать компонент для формы ниже. Как написать файл Express так, чтобы он вызывался из метода contactUs() в моем компоненте React? Благодаря!

import React from 'react'; 
import { 
    Col, 
    Input, 
    Button, 
Jumbotron 
} from 'react-bootstrap'; 

class ContactView extends React.Component{ 
    contactUs() { 
    // TODO: Send the email here 

    } 
    render(){ 
    return (
     <div> 
    <Input type="email" ref="contact_email" placeholder="Your email address"/> 
    <Input type="text" ref="contact_subject" placeholder="Subject"/> 
    <Input type="textarea" ref="contact_content" placeholder="Content"/> 
    <Button onClick={this.contactUs.bind(this)} bsStyle="primary" bsSize="large">Submit</Button> 
    </div> 
) 
    } 
}; 

export default ContactView; 

Answer 1

Когда кнопка нажата, выполнить запрос AJAX POST на ваш экспресс-сервер, то есть "/ ContactUS"./contactus может получать электронную почту, тему и содержимое из почтовых данных и отправлять функции почты.

В React:

$.ajax({ 
    url: '/contactus', 
    dataType: 'json', 
    cache: false, 
    success: function(data) { 
     // Success.. 
    }.bind(this), 
    error: function(xhr, status, err) { 
     console.error(status, err.toString()); 
    }.bind(this) 
}); 

В экспресс добавить код nodemailer в экспресс после обработчика:

app.post('/contactus', function (req, res) { 
    // node mailer code 
}); 

Answer 2

@ Райан-Дженкин совершенно правильно.

В качестве альтернативы, если у вас нет/jQuery в качестве зависимости, вы можете использовать собственный fetch api. Кроме того, я обычно настраиваю свою форму, чтобы каждый вход имел состояние, а затем использовал это состояние в стробированном блобе.

стороне клиента (React):

handleSubmit(e){ 
    e.preventDefault() 

    fetch('/contactus', { 
    method: 'POST', 
    headers: { 
     'Accept': 'application/json', 
     'Content-Type': 'application/json', 
    }, 
    body: JSON.stringify({ 
     email: this.state.email, 
     // then continue this with the other inputs, such as email body, etc. 
    }) 
    }) 
    .then((response) => response.json()) 
    .then((responseJson) => { 
    if (responseJson.success) { 
     this.setState({formSent: true}) 
    } 
    else this.setState({formSent: false}) 
    }) 
    .catch((error) => { 
    console.error(error); 
    }); 
} 

render(){ 
    return (
    <form onSubmit={this.handleSubmit} > 
     <input type="text" name="email" value={this.state.email} /> 
     // continue this with other inputs, like name etc 
    </form> 
) 
}