2016-12-20 14 views
0

私はEmailListコンポーネントをサーバー上のEmailServer.js 'NodeMailer'を呼び出すフォームと反応させました。 MailServer.jsファイルに静的に定義されたテスト件名とメッセージを含むメールを送信できます。 NodeMailerで使用する状態として、件名とメッセージをどのように渡すことができますか。Reactからノードサーバーへのフォーム値の受け渡し

EmailListコンポーネント

var EmailList = React.createClass({ 
getInitialState() { 
    return { 
     subject: '', 
     message: '' 
    } 
}, 
subjectChange(e) { 
    this.setState({subject: e.target.value}) 
}, 
messageChange(e) { 
    this.setState({message: e.target.value}) 
}, 
render() { 
    return (
     <div> 
      <div> 
       <Breadcrumb title={this.props.route.title + ' - ' + this.props.location.state.title} /> 
      </div> 
      <div className='ui-outer'> 
       <h2 className='text-center'>Email List</h2> 
        <form action='../EmailServer.js'> 
         <div className="form-group"> 
          <label htmlFor="subject">Subject</label> 
          <input type="text" name="subject" className="form-control" onChange={this.subjectChange} value={this.state.subject} /> 
         </div> 
         <div className="form-group"> 
          <label htmlFor="message">Message</label> 
          <textarea rows="8" name="message" className="form-control" onChange={this.messageChange} value={this.state.message} /> 
         </div> 
         <button type="submit" className="btn btn-success">Submit</button> 
       </form> 
      </div> 
     </div> 
    ) 
} 
}) 

EmailServer.js

var nodemailer = require('nodemailer'); 

// Create reusable transporter object using the default SMTP transport 
var transporter = nodemailer.createTransport('smtps://user%40gmail.com:[email protected]'); 

// Setup e-mail data with unicode symbols 
var mailOptions = { 
    from: '[email protected]', 
    to: '[email protected]', 
    subject: 'Hello', // <----Pass Subject State HERE 
    text: 'Hello World', // <-----Pass Message state HERE 
    html: '<b>Hello World</b>' // <-----Pass Message State HERE 
}; 

// Send email with defined transport object 
transporter.sendMail(mailOptions, function(error, info) { 
    if (error) { 
     return console.log(error); 
    } 
console.log('Message Sent: ' + info.response); 
}); 

答えて

0

私はあなたの問題が正しいなった場合は、ここでは多くの問題がある可能性があります。

  1. クライアントから要求されたnodejs expressサーバーで電子メール送信を処理するには、サーバー側でコードを設計するとよいでしょう。アプリケーションは、サーバインスタンスを発現nodejsある
app.get('/sendemail', function(req, res) {here you go and read request posted data/json}) 

  1. リアクションハンドラで、async httpクライアント(axiosやjqueryなど)のいずれかを使用してリクエストを送信します。
sendEmail: function(e){ 
    e.preventDefault(); 
    $.post(
     "/sendemail",{ 
     email: this.state.email, 
     password: this.state.password, 
     first_name: this.state.first_name, 
     last_name: this.state.last_name 
     }, function(result){ 
     //track result here 
     }); 
} 
で提出する
  • セットフォーム機能反応:
  • <form onSubmit={this.sendEmail} >...</form> 
    
    関連する問題