React.js + Express.jsを使用した電子メールの送信

Question

私はES6でReact.jsを使用してWebアプリケーションを構築しました。私は現在、基本的な "お問い合わせ"ページを作成し、電子メールを送信したいと考えています。私はReactを初めて使っていて、Reactを使って実際に電子メールを送ることができないことを発見しました。私はnodemailerとexpress-mailerのチュートリアルに従っていますが、サンプルコードをReactファイルと統合するのにはいくつかの困難がありました。具体的には、node expressFile.jsを呼び出すことができますが、これを自分のリアクションフロントエンドにリンクする方法はわかりません。

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

エクスプレスメーラー：https://www.npmjs.com/package/express-mailer

は、フォームのコンポーネントに反応マイは以下の通りです。どのようにしてExpressファイルを書いて、ReactコンポーネントのcontactUs()メソッドから呼び出すのですか？ありがとう！

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

ボタンがクリックされたら、エクスプレスサーバー、つまり「/ contactus」にajax POSTリクエストを実行します。/contactusは、ポストデータから電子メール、件名、およびコンテンツを取り出し、メール機能に送信することができます。

ではが反応：Expressで

$.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コードを追加：

Answer 2

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

ライアン-ジェンキン@完全に正確です。

また、jQueryを依存関係として使用したくない場合は、ネイティブfetch apiを使用できます。また、私は一般的に私のフォームを設定して各入力が状態を持っているので、文字列化されたBLOBでその状態を使用します。

クライアント側（リアクト）：

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> 
) 
}