【发布时间】：2018-10-31 12:49:32
【问题描述】：
实际上，我希望使用 reactjs 和 nodejs 在网站中创建联系表单。我已经使用 React 创建了表单，对于后端，我必须连接节点 js 以便我可以接收电子邮件。但它没有发生 React 和 Node 都应该在同一个端口上运行。我在 package.json 中提供了一个代理为“http://localhost:3000”，但它仍然无法正常工作。
我已经给出了 react js 和 node js 代码。请帮我解决这个错误。
反应 JS 代码
import React, { Component } from "react";
import axios from "axios";
export default class formSection extends Component {
state = {
name: "",
email: "",
subject: "",
comment: ""
};
handleChange = e => {
this.setState({
[e.target.name]: e.target.value
});
};
async handleSubmit(e) {
e.preventDefault()
const {name, email, subject, comment} = this.state
const contact = await axios.post('/api/contact', {
name,
email,
subject,
comment
})
};
render() {
return (
<section
className="wow fadeIn big-section"
id="section-down"
style={{ visibility: true }}
>
<div className="container">
<div className="row equalize sm-equalize-auto">
<div
className="col-md-6 col-sm-12 col-xs-12 sm-margin-30px-bottom wow fadeInLeft"
style={{ visibility: true, height: 597 }}
>
<div className="padding-fifteen-all bg-light-gray border-radius-6 md-padding-seven-all xs-padding-30px-all height-100">
<span className="text-extra-dark-gray alt-font text-large font-weight-600 margin-25px-bottom display-block">
Ready to get started?
</span>
<form id="contact-form" onSubmit={e=>this.handleSubmit(e)} method="POST">
<div>
<div
id="success-contact-form"
className="no-margin-lr"
style={{ display: true }}
/>
<input
type="text"
name="name"
id="name"
value={this.state.name}
placeholder="Name*"
className="border-radius-4 medium-input"
onChange={this.handleChange}
/>
<input
type="text"
name="email"
value={this.state.email}
id="email"
placeholder="E-mail*"
className="border-radius-4 medium-input"
onChange={this.handleChange}
/>
<input
type="text"
name="subject"
id="subject"
value={this.state.subject}
placeholder="Subject"
className="border-radius-4 medium-input"
onChange={this.handleChange}
/>
<textarea
name="comment"
id="comment"
value={this.state.comment}
placeholder="Your Message"
rows="5"
className="border-radius-4 medium-textarea"
onChange={this.handleChange}
/>
<button
id="contact-us-button"
type="submit"
className="btn btn-small border-radius-4 btn-dark-gray"
>
send message
</button>
</div>
</form>
</div>
</div>
<div
className="col-md-6 col-sm-12 col-xs-12 last-paragraph-no-margin wow fadeInRight"
style={{ visibility: true, height: 597 }}
>
<div className="padding-ten-all bg-light-gray border-radius-6 md-padding-seven-all xs-padding-30px-all height-100 sm-text-center">
<img
src="images/about-img1.jpg"
alt=""
className="border-radius-6 margin-35px-bottom xs-margin-30px-bottom"
data-no-retina=""
/>
<span className="text-large font-weight-600 alt-font text-extra-dark-gray margin-5px-bottom display-block">
Let's plan for a new project?
</span>
<p>
Lorem Ipsum is simply dummy text of the printing and
typesetting industry, Lorem Ipsum has been the standard dummy
text.
</p>
<a
href="about-us-modern.html"
className="btn btn-dark-gray btn-small text-extra-small border-radius-4 margin-25px-top"
>
About Company
</a>
</div>
</div>
</div>
</div>
</section>
);
}
}
节点 JS 代码
const express = require('express');
const bodyParser = require('body-parser');
const nodemailer = require('nodemailer');
const app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended:false}));
app.post('/api/contact', (req, res) => {
console.log(req.body);
});
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(`server listening in port ${PORT}`);
})
【问题讨论】：
-
想要在相同的端口上运行 react 和 node 吗？
-
是的，在 3000 端口上！我试过但没有工作。你能帮忙吗？
-
React 不在自己的端口上运行。它在节点上运行，节点在端口 3000 上运行。不清楚你的问题是什么。它以什么方式“不起作用”？你在哪里将 React 注入到你的索引页面中？
-
您可以在使用一个 nodejs 服务器进行反应 SSR 和 API 服务器时执行此操作。这意味着你不能使用像 create-react-app 这样的工具。你是使用工具还是纯粹的反应？
-
@mihai 使用 React(i.e)Front End 创建了表单。现在必须使用节点 js 服务器发送电子邮件。如果我启动节点服务器，前端将无法正常工作。请检查上面的代码。
标签： javascript node.js reactjs