web-dev-qa-db-ja.com

React.js + Express.jsを使用してメールを送信する

ES6でReact.jsを使用してWebアプリを構築しました。現在、基本的な「お問い合わせ」ページを作成し、メールを送信したいと考えています。私はReactを初めて使用しましたが、React自体を使用して実際にメールを送信できないことに気付きました。 nodemailerと_express-mailer_を使用してチュートリアルを実行していますが、サンプルコードをReactファイルと統合するのに問題がありました。具体的には、_node expressFile.js_の呼び出しは機能しますが、これをReactフロントエンドにリンクする方法がわかりません。

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

Express-mailer： https://www.npmjs.com/package/express-mailer

フォームのReactコンポーネントは以下のとおりです。 ReactコンポーネントのcontactUs()メソッドから呼び出されるようにExpressファイルを作成するにはどうすればよいですか？ありがとう！

_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;
_
javascriptnode.jsemailexpressreactjs
8
felix_xiao

ボタンがクリックされたら、ajax POSTリクエストをExpressサーバー、つまり「/ 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)
});

Expressでは、ExpressPostハンドラー内にnodemailerコードを追加します。

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

@ ryan-jenkinは完全に正しいです。

または、依存関係としてjQueryがない/必要な場合は、ネイティブ fetch api を使用できます。また、私は通常、各入力に状態があるようにフォームを設定し、その状態を文字列化されたBLOBで使用します。

クライアント側（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>
  )
}
6
blakeface