node.js - 如何将数据从反应前端传递到节点快递后端?
问题描述
我刚刚构建了一个应用程序,我希望能够将数据从我的 OnSubmit 函数发送到 express 后端并将其存储在那里。
这是我的服务器代码:
const express = require('express');
const bodyParser = require('body-parser')
const path = require('path');
const app = express();
app.use(express.static(path.join(__dirname, 'build')));
app.get('/home', function (req, res) {
return res.send('home');
});
app.get('/', function (req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
app.listen(process.env.PORT || 8080);
这是我的提交功能
import React, { Component } from 'react';
import './App.css';
import PageOne from './Components/PageOne';
import PageTwo from './Components/PageTwo';
import PageThree from './Components/PageThree';
import PageFour from './Components/PageFour';
import PageFive from './Components/PageFive';
import PageSix from './Components/PageSix';
import {Button, } from 'semantic-ui-react'
import axios from 'axios';
class App extends Component {
constructor(props){
super(props)
this.state={
generalDetails: "Text",
fName: "Text",
mName: "Text",
LName: "Text",
}
this.onContentChange = this.onContentChange.bind(this);
this.onSubmitForm = this.onSubmitForm.bind(this);
}
render() {
return (
<div className="App">
<PageOne handleChange={this.onContentChange} />
<PageTwo handleChange={this.onContentChange} />
<PageThree handleChange={this.onContentChange} />
<PageFour handleChange={this.onContentChange} />
<PageFive handleChange={this.onContentChange}/>
<PageSix handleChange={this.onContentChange} />
<Button onClick={this.onSubmitForm} >
Submit Form
</Button>
<br/>
<br/>
</div>
);
}
onSubmitForm(e){
e.preventDefault();
console.log(
//start of page one
'* general Details: ' ,this.state.generalDetails,
'* First Name: ', this.state.fName,
'* Middle Name: ', this.state.mName,
'* Last Name: ', this.state.lName,
);
}
//end
onContentChange(fieldname, data){
console.log('On Content Change', data);
this.setState({
[fieldname]: data
});
}
}
解决方案
选择一个 HTTP 客户端,我推荐axios
它以方便使用。
您在 react 客户端上的代码应如下所示:
const respone = axios.post('http://localhost:8080/<your_endpoint>', {
generalDetail: this.state.generalDetails,
firstName: this.state.firstName,
middleName: this.state.middleName,
lastName: this.state.lastName
})
然后,您解析响应并获取数据,它是 promise 对象。
推荐阅读
- html - 基于 Flexbox 的表格
- jwt - 谷歌登录:使用 google-auth Python 包时“找不到密钥 id xxxx 的证书”
- node.js - 一次调用多次搜索一个集合
- c# - 如何在浏览器关闭 15 分钟后使用 Core 2.2 中的 Identity 保持会话活动?
- java - 在java中创建一个返回数组的toString方法
- c# - 如何通过 VSTO 插件运行 Excel 的菜单项?
- mysql - 为什么 mySQL 查询会给出意想不到的结果?
- javascript - 如何从 HTML 调用缩小的函数?
- c# - Unity 3D 使用用户输入围绕轨道移动物体
- php - 如何截断这个 PHP 语句?