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配合)的更多相关文章

  1. JS-利用ajax获取json数据,并传入页面生成动态tab

    封装好的:ajax.js function ajax(url, fnSucc,fnFaild){ //1[创建] if(window.XMLHttpRequest){ var oAjax = new ...

  2. 十一、React 获取服务器数据: axios插件、 fetch-jsonp插件的使用

    react获取服务器APi接口的数据: react中没有提供专门的请求数据的模块.但是我们可以使用任何第三方请求数据模块实现请求数据 一.axios 获取Api数据 使用文档:https://www. ...

  3. Netflix Falcor获取JSON数据

    Netflix开源了JavaScript库Falcor,它为从多个来源获取JSON数据提供了模型和异步机制. Netflix利用Falcor库实现通过JSON数据填充他们网页应用的用户界面.所有来自内 ...

  4. jquery通过ajax方法获取json数据不执行success

    1.jquery通过ajax方法获取json数据不执行success回调 问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准 ...

  5. jquery用ajax方式从后台获取json数据,将内容填充到下拉列表。

    从后台获取json数据,将内容填充到下拉列表. url:链接 par:ID sel:下拉列表选择器 //获取下拉列表 function BuildSelectBox(url, par, sel) { ...

  6. JQuery 获取json数据$.getJSON方法的实例代码

    这篇文章介绍了JQuery 获取json数据$.getJSON方法的实例代码,有需要的朋友可以参考一下 前台: function SelectProject() { var a = new Array ...

  7. Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法,绑定,each循环,ajax获取json数据

    jquery.tmpl.js 是一个模板js  ,主要有2个方法 (1):$.template()方法,将一段script或者是Html编译为模板,例如 $.template('myTemplate' ...

  8. android客户端从服务器端获取json数据并解析的实现代码

    今天总结一下android客户端从服务器端获取json数据的实现代码,需要的朋友可以参考下   首先客户端从服务器端获取json数据 1.利用HttpUrlConnection /** * 从指定的U ...

  9. jquery通过ajax方法获取json数据不执行success回调

    问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准写法,导致总是执行error回调方法 解决方案:使json格式务必符合下述 ...

  10. (转)android客户端从服务器端获取json数据并解析的实现代码

    今天总结一下android客户端从服务器端获取json数据的实现代码,需要的朋友可以参考下       首先客户端从服务器端获取json数据 1.利用HttpUrlConnection   复制代码 ...

随机推荐

  1. Template String Converter - 字符串中加变量 自动将单引号变换 - vscode插件

    Template String Converter - 字符串中加变量 自动将单引号变换 - vscode插件

  2. FreeRTOS教程4 消息队列

    1.准备材料 正点原子stm32f407探索者开发板V2.4 STM32CubeMX软件(Version 6.10.0) Keil µVision5 IDE(MDK-Arm) 野火DAP仿真器 XCO ...

  3. RunOnWeb - 创建新协议,支持html调用本地可执行文件,支持浏览器互相调用

    浏览器调用 exe ?    Yes!  谷歌 Chrome 启动微软 Edge ?     Yes! RunOnWeb 协议 创建新协议,支持html调用本地可执行文件,支持浏览器互相调用 [最新版 ...

  4. [.NET项目实战] Elsa开源工作流组件应用(一): Elsa工作流简介

    Elsa工作流简介 工作流是什么? 引用维基百科中对工作流的解释: 是对工作流程及其各操作步骤之间业务规则的抽象.概括.描述.工作流建模,即将工作流程中的工作如何前后组织在一起的逻辑和规则在计算机中以 ...

  5. [Atcoder - Distinct Trio ] 动态规划

    记f[i][j] 为前i个元素能构成的j个不同元素对的个数.对于题目j<=3;这样就有转移方程. import java.io.BufferedReader; import java.io.IO ...

  6. Android 开发Day8

    /* AUTO-GENERATED FILE. DO NOT MODIFY. * * This class was automatically generated by the * gradle pl ...

  7. python面向对象(基础)

    一 面向对象介绍 面向过程: 核心是:"过程"二字 过程的终极奥义就是将程序流程化 过程是"流水化",用来分步骤解决问题的 面向对象: 核心是"对象& ...

  8. 英语文档阅读学习系列之ZYNQ-7000 All Programmable SOC Packaging and Pinout

    UG865-Zynq-7000-pkg-pinout 1.Table 一个overview和其他部分的构成一个整体. 2.overview This section describes the pin ...

  9. #博弈论#HDU 1847 Good Luck in CET-4 Everybody!

    题目 有\(n\)个石子,每次只能取2的自然数幂个, 取完石子的人获胜,问先手是否必胜 分析 如果不是3的倍数,那么取完一次一定能剩下3的倍数个, 反之亦然,那么3的倍数为必败状态 代码 #inclu ...

  10. #背包#nssl 1488 上升子序列

    题目 给一个长度为\(n\)的数组\(a\).试将其划分为两个严格上升子序列,并使其长度差最小. 分析 当\(max([1,i])<min([i+1,n])\)时显然两个区间互不影响,把\(i\ ...