(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 复制代码 ...
随机推荐
- 【深度学习】神经网络正则化方法之Dropout
前言 正则化是一种广泛用于机器学习和深度学习的手段,它的目的就是阻碍模型过度学习(过拟合),从而提升算法的泛化能力. Dropout 是一种常见的缓解过拟合的方法.接下来,本文将从原理和实践来介绍Dr ...
- pcm5102芯片解析之基本概念
一 前记 1 在音频领域深耕,那就要不断的前行.最近有几个项目需要用到pcm5102这颗料,藉此机会,针对这个料进行深入的研究一下.做一一些简要的分析. 二 概念 音频芯片的指标,其实,很多年都没啥变 ...
- 泰凌微TLSR8258芯片解决方案开发之串口打印级别设置
一 TRSR8258简介 该芯片是泰凌微推出来的一款纯ble的芯片,接口丰富,功耗低,资源丰富,非常适合做可穿戴物联网设备,笔者拿这颗芯片做了不少方案,感觉非常好用,所以这里写一下使用心得. 二 串 ...
- Avalonia 11.1.0-beta1 发布
11.1.0-beta1 Avalonia 是 dotnet 的跨平台 UI 框架,提供灵活的样式系统,支持 Windows.macOS.Linux.iOS.Android 和 WebAssembly ...
- Locust 断言的实现?
一.检查点的方式有哪些: 主要是python 内置的assert 断言(自动断言)还有locust 中的catch_response 断言(手动断言):那么这两者之间有什么区别呢? 其实主要区别在与生 ...
- Bitmap优化详谈
目录介绍 01.如何计算Bitmap占用内存 1.1 如何计算占用内存 1.2 上面方法计算内存对吗 1.3 一个像素占用多大内存 02.Bitmap常见四种颜色格式 2.1 什么是bitmap 2. ...
- Collation 差异导致 KingbaseES 与 Oracle 查询结果不同
问题引入 前端提了个问题,说是KingbaseES 返回的结果与 Oracle 返回的结果不一样.具体问题如下: oracle 执行结果:oracle 有结果返回. SQL> create ta ...
- archlinux virtualbox使用文件共享 主机arch,客机windows8.1 windows10
参照 https://www.cnblogs.com/cuitang/p/11263008.html 1.安装virtualbox增强功能VBoxGuestAdditions.iso (1)从virt ...
- Java学习路线之redis
1.redis 大数据时代三V:海量Volume.多样Variety.实时Velocity 大数据时代三高:高并发.高可用(无限套娃+彼此监控).高性能 - Redis(Remote Dictiona ...
- 4 HTML表格标签
4 表格标签 表格标签也是一种复合标签.由:table,tr,td,th,thead,tbody组合,由行和列组合成,行和列交叉的地方就是单元格.在HTML中使用table来定义表格.网页的表格和办公 ...