(react)获取json数据与传入(antd配合)
import React from 'react';
import {fetch} from 'whatwg-fetch';
// import {HashRouter as Router,Route,Redirect,Switch} from 'react-router-dom'
import { Table,Input,Button,Radio,Modal} from 'antd'; import './index.css'; export default class Home extends React.Component {
constructor(props){
super(props)
this.state = {
columns : [
{ title: 'id', dataIndex: 'id', key: 'id' },
{ title: '日期', dataIndex: 'date', key: 'date' },
{ title: '姓名', dataIndex: 'name', key: 'name' },
{ title: '地址', dataIndex: 'address', key: 'address' },
{title: '删除', dataIndex: '',key: 'x',render: () => <a href="javascript:;">Delete</a>,},
],
data:[] ,
visible: false, id:3,
xm:'',
dizhi:'',
date:'',
}
} render() { return(
<div className='app'>
<Table
columns={this.state.columns} dataSource={this.state.data}
/>,
<Button className='btn' type="primary" shape="round" onClick={this.showModal} >
添加项目
</Button> <Modal
title="录入用户"
visible={this.state.visible}
onOk={this.handleOk}
okText='确认'
onCancel={this.handleCancel}
cancelText='取消'
>
<p>姓名:<Input className='inp' placeholder="请输入姓名" onChange={this.xm.bind(this)} /></p>
<p>地址:<Input className='inp' placeholder="请输入地址" onChange={this.dz.bind(this)} /></p> </Modal> </div> )
}
componentDidMount(){
//获取json里的数据
var that = this;
fetch("http://localhost:3000/user", {
method: "GET",
// headers: {
// "Content-Type": "application/json",
// },
// mode: "cors",
// body: JSON.stringify({
// content: "留言内容"
// })
}).then((res)=>
res.json()
).then((res)=> { that.setState({ data:res, })
console.log(res)
}).catch((err) =>{
console.log(err);
}); }
xm = (e)=>{
//var that = this;
let val = e.target.value; console.log(val)
this.setState({
xm:val,
val:''
}) } dz = (e)=>{
//var that = this;
let val = e.target.value;
console.log(val)
this.setState({
dz:val,
val:''
})
} showModal = () => {
this.setState({
visible: true,
});
}; handleOk = e => { let date = new Date();
let asd = date.getTime();
let obj={
date:asd,
name:this.state.xm,
address:this.state.dz, } this.state.data.push(obj)
//把写好的数据传入db.json
fetch("http://localhost:3000/user", {
method: "POST",
body: JSON.stringify({
...obj,
}),
headers: {
"content-type": "application/json"
}
})
.then(response => response.json())
.then(res => {
console.log(res); });
// this.setState({ visible: false,
});
}; handleCancel = e => {
console.log(e);
this.setState({
visible: false,
});
}; }
(react)获取json数据与传入(antd配合)的更多相关文章
- JS-利用ajax获取json数据,并传入页面生成动态tab
封装好的:ajax.js function ajax(url, fnSucc,fnFaild){ //1[创建] if(window.XMLHttpRequest){ var oAjax = new ...
- 十一、React 获取服务器数据: axios插件、 fetch-jsonp插件的使用
react获取服务器APi接口的数据: react中没有提供专门的请求数据的模块.但是我们可以使用任何第三方请求数据模块实现请求数据 一.axios 获取Api数据 使用文档:https://www. ...
- Netflix Falcor获取JSON数据
Netflix开源了JavaScript库Falcor,它为从多个来源获取JSON数据提供了模型和异步机制. Netflix利用Falcor库实现通过JSON数据填充他们网页应用的用户界面.所有来自内 ...
- jquery通过ajax方法获取json数据不执行success
1.jquery通过ajax方法获取json数据不执行success回调 问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准 ...
- jquery用ajax方式从后台获取json数据,将内容填充到下拉列表。
从后台获取json数据,将内容填充到下拉列表. url:链接 par:ID sel:下拉列表选择器 //获取下拉列表 function BuildSelectBox(url, par, sel) { ...
- JQuery 获取json数据$.getJSON方法的实例代码
这篇文章介绍了JQuery 获取json数据$.getJSON方法的实例代码,有需要的朋友可以参考一下 前台: function SelectProject() { var a = new Array ...
- Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法,绑定,each循环,ajax获取json数据
jquery.tmpl.js 是一个模板js ,主要有2个方法 (1):$.template()方法,将一段script或者是Html编译为模板,例如 $.template('myTemplate' ...
- android客户端从服务器端获取json数据并解析的实现代码
今天总结一下android客户端从服务器端获取json数据的实现代码,需要的朋友可以参考下 首先客户端从服务器端获取json数据 1.利用HttpUrlConnection /** * 从指定的U ...
- jquery通过ajax方法获取json数据不执行success回调
问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准写法,导致总是执行error回调方法 解决方案:使json格式务必符合下述 ...
- (转)android客户端从服务器端获取json数据并解析的实现代码
今天总结一下android客户端从服务器端获取json数据的实现代码,需要的朋友可以参考下 首先客户端从服务器端获取json数据 1.利用HttpUrlConnection 复制代码 ...
随机推荐
- vue-helper 组件 跳转 | Vue Jump to Tag 好用,需自己设定快捷键 | Path Intellisense
vue-helper 组件 跳转 组件名称 除首字母大写,其他不能有大写字母,否则不能跳转 比如 mycomponent 这个名字可以 Mycomponent 这个名字可以 myComponent 这 ...
- PRD(产品需求文档)与SRS(软件需求规格说明书)的区别
需求分析是软件开发过程中很重要的一个环节,目前需求分析完成后输出的文档有2种体系,一个是SRS(Software Requirements Specification,软件需求规格说明书),一个是PR ...
- KTL 一个支持C++14编辑公式的K线技术工具平台 - 第九版,数据分析工具。支持通达信日线数据。增强即时插件编程体现。
K,K线,Candle蜡烛图. T,技术分析,工具平台 L,公式Language语言使用c++14,Lite小巧简易. 项目仓库:https://github.com/bbqz007/KTL 国内仓库 ...
- Linux DISPLAY环境变量的妙用(error:QXcbConnection: Could not connect to display) ,xhost 命令, 通过ssh连接显示界面
PS:要转载请注明出处,本人版权所有. PS: 这个只是基于<我自己>的理解, 如果和你的原则及想法相冲突,请谅解,勿喷. 前置说明 本文作为本人csdn blog的主站的备份.(Bl ...
- JS(数组)
一 数组的概念 问:之前学习的数据类型,只能存储一个值.如果我们想存储班级中所有学生的姓名,那么该如何存储呢?答:可以使用数组(Array).数组可以把一组相关的数据一起存放,并提供方便的访问(获取) ...
- 浅析三维模型3DTile格式轻量化处理常见问题与处理措施
浅析三维模型3DTile格式轻量化处理常见问题与处理措施 三维模型3DTile格式的轻量化处理是大规模三维地理空间数据可视化的关键环节,但在实际操作过程中,往往会遇到一些问题.下面我们来看一下这些常见 ...
- csproj技巧,以及使用其他类库冲突,以及引入第三方UI方式
1.在项目中我们经常写 string? Message{get;set;} 明明是引用类型,它底下还是会出现波浪线,我们可以打开csproj 找到Nullable将它改为disable,或者删除,它默 ...
- Python 潮流周刊第 43 期(摘要),赠书 5 本《Python数据结构与算法分析(第3版)》
本周刊由 Python猫 出品,精心筛选国内外的 250+ 信息源,为你挑选最值得分享的文章.教程.开源项目.软件工具.播客和视频.热门话题等内容.愿景:帮助所有读者精进 Python 技术,并增长职 ...
- .NET分布式Orleans - 4 - 计时器和提醒
Timer是什么 Timer 是一种用于创建定期粒度行为的机制. 与标准的 .NET System.Threading.Timer 类相似,Orleans 的 Timer 允许在一段时间后执行特定的操 ...
- RMI反序列化分析
RMI介绍 RMI全程Remote Method Invocation (远程方法引用),RMI有客户端和服务端,还有一个注册中心,在java中客户端可以通过RMI调用服务端的方法,流程图如下: 服务 ...