使用React.js+Express.js发送电子邮件
Send an Email Using React.js + Express.js
我在ES6中使用React.js构建了一个web应用程序。我目前想创建一个基本的"联系我们"页面,并想发送一封电子邮件。我是React的新手,刚刚发现我实际上无法使用React本身发送电子邮件。我正在学习nodemailer
和express-mailer
的教程,但在将示例代码与React文件集成时遇到了一些困难。具体来说,调用node expressFile.js
是可行的,但我不知道如何将其链接到我的React前端。
Nodemailer:https://github.com/nodemailer/nodemailer
快递员:https://www.npmjs.com/package/express-mailer
我的表单React组件如下。我该如何编写一个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;
单击按钮后,执行一个到express服务器的ajax POST请求,即"/contactus"/contactus可以从邮件数据中提取电子邮件、主题和内容,并发送到邮件功能。
反应中:
$.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中,在express post处理程序中添加nodemailer代码:
app.post('/contactus', function (req, res) {
// node mailer code
});
@ryan jenkin是完全正确的。
或者,如果您不希望jQuery作为依赖项,则可以使用本机fetchapi。此外,我通常会设置表单,使每个输入都有一个状态,然后在字符串化的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>
)
}
相关文章:
- php&js-将电子邮件添加到输入文本中
- 将用户制作的SVG(raphael.js)发送到服务器(php),以便通过电子邮件发送
- 使用节点JS发送电子邮件
- 页面上的2个表单带有JS验证-其中一个抛出电子邮件验证错误
- 使用React.js+Express.js发送电子邮件
- Angular js显示类似gmail的重叠电子邮件线程
- 如何检查当前用户电子邮件是否已在客户端js文件中验证
- Zendesk app.js示例用于发送外部电子邮件通知或AJAX请求
- 无法读取未定义的属性“用户名” - 通过电子邮件在 Node.js 中发送表单数据
- 从 Node.JS使用 MailGun 发送 HTML 电子邮件
- 在passport.js中使用令牌验证电子邮件
- 使用官方 Node.js SendGrid API 发送电子邮件时,响应 JSON 中可能出现哪些错误消息
- Node.js mongodb电子邮件验证
- 当用HTML5+JS+PHP设计发送到电子邮件的表单时,需要采取哪些良好的安全预防措施
- 使用Meteor.js发送电子邮件附件(电子邮件包和/或nodemailer或其他)
- 调用外部JS函数验证电子邮件
- 将extra_data发送到simplecart.js并将sendform发送到电子邮件地址
- 使用 sendgrid 发送电子邮件 [Node.js]
- 如何使用 Wolfpack.js 测试我的 Sails.js 模型的唯一电子邮件属性
- 使用 Angular JS 的电子邮件 ID 的自动完成建议