1. import React from 'react';
  2. import {fetch} from 'whatwg-fetch';
  3. // import {HashRouter as Router,Route,Redirect,Switch} from 'react-router-dom'
  4. import { Table,Input,Button,Radio,Modal} from 'antd';
  5.  
  6. import './index.css';
  7.  
  8. export default class Home extends React.Component {
  9. constructor(props){
  10. super(props)
  11. this.state = {
  12. columns : [
  13. { title: 'id', dataIndex: 'id', key: 'id' },
  14. { title: '日期', dataIndex: 'date', key: 'date' },
  15. { title: '姓名', dataIndex: 'name', key: 'name' },
  16. { title: '地址', dataIndex: 'address', key: 'address' },
  17. {title: '删除', dataIndex: '',key: 'x',render: () => <a href="javascript:;">Delete</a>,},
  18. ],
  19. data:[] ,
  20. visible: false,
  21.  
  22. id:3,
  23. xm:'',
  24. dizhi:'',
  25. date:'',
  26. }
  27. }
  28.  
  29. render() {
  30.  
  31. return(
  32. <div className='app'>
  33. <Table
  34. columns={this.state.columns}
  35.  
  36. dataSource={this.state.data}
  37. />,
  38. <Button className='btn' type="primary" shape="round" onClick={this.showModal} >
  39. 添加项目
  40. </Button>
  41.  
  42. <Modal
  43. title="录入用户"
  44. visible={this.state.visible}
  45. onOk={this.handleOk}
  46. okText='确认'
  47. onCancel={this.handleCancel}
  48. cancelText='取消'
  49. >
  50. <p>姓名:<Input className='inp' placeholder="请输入姓名" onChange={this.xm.bind(this)} /></p>
  51. <p>地址:<Input className='inp' placeholder="请输入地址" onChange={this.dz.bind(this)} /></p>
  52.  
  53. </Modal>
  54.  
  55. </div>
  56.  
  57. )
  58. }
  59. componentDidMount(){
    //获取json里的数据
  60. var that = this;
  61. fetch("http://localhost:3000/user", {
  62. method: "GET",
  63. // headers: {
  64. // "Content-Type": "application/json",
  65. // },
  66. // mode: "cors",
  67. // body: JSON.stringify({
  68. // content: "留言内容"
  69. // })
  70. }).then((res)=>
  71. res.json()
  72. ).then((res)=> {
  73.  
  74. that.setState({
  75.  
  76. data:res,
  77.  
  78. })
  79. console.log(res)
  80. }).catch((err) =>{
  81. console.log(err);
  82. });
  83.  
  84. }
  85. xm = (e)=>{
  86. //var that = this;
  87. let val = e.target.value;
  88.  
  89. console.log(val)
  90. this.setState({
  91. xm:val,
  92. val:''
  93. })
  94.  
  95. }
  96.  
  97. dz = (e)=>{
  98. //var that = this;
  99. let val = e.target.value;
  100. console.log(val)
  101. this.setState({
  102. dz:val,
  103. val:''
  104. })
  105. }
  106.  
  107. showModal = () => {
  108. this.setState({
  109. visible: true,
  110. });
  111. };
  112.  
  113. handleOk = e => {
  114.  
  115. let date = new Date();
  116. let asd = date.getTime();
  117. let obj={
  118. date:asd,
  119. name:this.state.xm,
  120. address:this.state.dz,
  121.  
  122. }
  123.  
  124. this.state.data.push(obj)
  125. //把写好的数据传入db.json
  126. fetch("http://localhost:3000/user", {
  127. method: "POST",
  128. body: JSON.stringify({
  129. ...obj,
  130. }),
  131. headers: {
  132. "content-type": "application/json"
  133. }
  134. })
  135. .then(response => response.json())
  136. .then(res => {
  137. console.log(res);
  138.  
  139. });
  140. //
  141.  
  142. this.setState({
  143.  
  144. visible: false,
  145. });
  146. };
  147.  
  148. handleCancel = e => {
  149. console.log(e);
  150. this.setState({
  151. visible: false,
  152. });
  153. };
  154.  
  155. }

 

(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. tomcat startup.bat 包含springboot的输出 里面乱码的解决方案

    springboot输出是用的 logger 它的编码是 UTF-8 tomcat 默认也是UTF-8 但是win10 默认的 命令窗口是 GBK的,如果把tomcat 和 springboot的格式 ...

  2. Apollo3 Blue SoC 和 Apollo3 Blue Plus SoC的区别

    一 芯片简介 1.简介 Apollo3 Blue系列SoC解决方案代表了超低功耗设计的巨大飞跃,其运行模式和睡眠模式下的功耗数值均十分出色,并且具有高性能的处理引擎. Apollo3Blue器件提供了 ...

  3. spring boot 自动装载对象为null问题的解决

    情况描述 有个Server类,成员变量是spring中自动管理的bean类对象 public class Server { @Autowired private CommandMapper comma ...

  4. day12-面向对象03

    面向对象03 10.抽象类 abstract修饰符可以用来修饰方法也可以修饰类,如果修饰方法,那么该方法就是抽象方法:如果修饰类,那么该类就是抽象类 抽象类中可以没有抽象方法,但是有抽象方法的类一定要 ...

  5. 获取Android设备系统apk

    前提条件是:电脑adb连接Android设备 打开命令好窗口,输入指令adb shell "dumpsys window|grep mCurrentFocus" 输入指令adb s ...

  6. 博客调整为MarkDown和图床外链、配置Gitee作为图床

    PS:要转载请注明出处,本人版权所有. PS: 这个只是基于<我自己>的理解, 如果和你的原则及想法相冲突,请谅解,勿喷. 前置说明   本文作为本人csdn blog的主站的备份.(Bl ...

  7. 记录--ThreeJs手搓一个罗盘特效

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 先上效果 前言 最近在学Three.js.,对着文档看了一周多,正好赶上码上掘金的活动,就顺便写了一个小demo,手搓一个罗盘特效. 太极 ...

  8. 第145篇:js设计模式注册模式及相应实践

    好家伙,   0.索引  在阿里的低开项目中,使用这种形式去注册组件,我不禁好奇,这到底是个什么玩意 1.概念 在 JavaScript 中,注册模式(Registry Pattern)是一种设计模式 ...

  9. Mysql中的锁(case篇)

    case1(表锁的读-写-读阻塞) 上篇文档中提到过 WRITE locks normally have higher priority than READ locks to ensure that ...

  10. oracle job 带参数

    declare job number; begin sys.dbms_job.submit(job => job, what => 'DECLARE S1 VARCHAR2(4000); ...