说明一下我是使用creat-react-app来创建的项目
1. 在package.json加上如下配置即可
"proxy": "http://localhost:8082",
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:8082",
"dependencies": {
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-scripts": "2.0.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
2.请求
// 请求后台数据
changeInputValue(){
/* 查询数据的格式 */
let filter={
object:{
object:{
}
}
}
var url ="/flightsInterfaceBLH_searchFlightsAndPersons.do";
var getInformation ={
method:"POST",
headers:{
"Content-Type":"application/json"
},
/* json格式转换 */
body:JSON.stringify(filter)
}
fetch(url,getInformation)
.then(response => response.json())
.then(json =>{
// 返回的数据 根据自己返回的json格式取值
debugger;
this.setState({
inputValue:json[0].searchDate
})
})
}
我的json数据格式
[
{
statusCode: "1",
statusInfo: "success",
searchDate: "2018-11-01",
searchAirport: null,
confirmTime: null,
data: [ ]
}
]
3.结果
4.附上全部代码
import React, { Component } from 'react';
class HelloWorld extends React.Component {
/**
* 初始化
* @param {*} props
*/
constructor(props){
super(props);
this.state = {
inputValue : ''
}
}
// 请求后台数据
changeInputValue(){
/* 查询数据的格式 */
let filter={
object:{
object:{
}
}
}
var url ="/flightsInterfaceBLH_searchFlightsAndPersons.do";
var getInformation ={
method:"POST",
headers:{
"Content-Type":"application/json"
},
/* json格式转换 */
body:JSON.stringify(filter)
}
fetch(url,getInformation)
.then(response => response.json())
.then(json =>{
// 返回的数据 根据自己返回的json格式取值
debugger;
this.setState({
inputValue:json[0].searchDate
})
})
}
render() {
return (
<div >
<div>
<input value={this.state.inputValue}/>
<button className='red-btn' onClick={this.changeInputValue.bind(this)} >search</button>
</div>
<ul>
<li></li>
</ul>
</div>
);
}
}
export default HelloWorld;