Question

我有一个EmailList组件与一个调用EmailServer.js＆＃39; NodeMailer＆＃39;在服务器上。我可以静态发送包含MailServer.js文件中定义的测试主题和消息的电子邮件。如何将主题和消息作为要在NodeMailer中使用的状态传递。

电子邮件列表组件

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:pass@smtp.gmail.com');

// Setup e-mail data with unicode symbols
var mailOptions = {
    from: 'em@il.com',  
    to: 'test@email.com',  
    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);
});

Answer 1

如果我的问题正确无误，可能会出现一些问题。

您可能希望在服务器端设计代码，以处理从客户端请求的nodejs express服务器发送电子邮件。

app.get('/sendemail', function(req, res) {here you go and read request posted data/json})

其中app是nodejs express server instance。

让反应处理程序使用异步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
      });
}

使用react函数设置要提交的表单：

<form onSubmit={this.sendEmail} >...</form>

现在将表单值从React传递到Node服务器

1 个答案: