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. end_of_line = lf 选择行尾序列 .editorconfig - 老项目不动代码存盘 文件变动 CRLF 的问题 vscode

    end_of_line = lf 选择行尾序列 .editorconfig - 老项目不动代码存盘 文件变动 CRLF 的问题 缘由 vscode 老项目代码,没有变动,ctrl + s后 文件有变化 ...

  2. tapable - webpack 的 hooks - getAc - 异步流程控制

    tapable - webpack 的 hooks,类似自己的 getAc 官方地址 https://www.npmjs.com/package/tapable 随便找了篇文章:聊聊 Webpack ...

  3. vscode 自动格式化md文件,搞得很是郁闷,加入 [markdown] 自定义配置 "editor.formatOnSave": false 搞定了。

    上下文: vscode做vue的项目开发,需要对代码进行格式化,用的vetur插件 正常来讲,代码保存的时候,需要进行格式化,所以配置文件会写成 "editor.formatOnSave&q ...

  4. Oracle注入—报错注入

    Oracle注入-报错注入 1.Oracle报错注入知识扫盲 一.Oracle报错注入知识扫盲 报错注入 报错注入就是,输入的一些能让数据库出错的语句,数据库会把这个错误回显给我们 OK,,什么语句能 ...

  5. 对角矩阵try

    \begin{bmatrix}1 & 0 & 0\\ 0 & 1 & 0\\ 0 & 0 & 1\end{bmatrix}

  6. C#中的For与Foreach循环:一场性能对话与实战解析

    引言 在C#编程实践中,选择适当的循环结构对程序性能至关重要,尤其是在处理大量数据或追求极致运行效率时.本文将深入探讨C#中的两种主要迭代机制--传统的for循环和基于集合迭代器的foreach循环之 ...

  7. drf(JWT认证)

    一. jwt实现过程 1. 构建jwt过程 第一: 用户提交用户名和密码给服务端,如果登录成功,使用jwt创建一个token,并给用户返回 eyJ0eXAiOiJqd3QiLCJhbGciOiJIUz ...

  8. 【Leetcode】300. 最长递增子序列

    题目(链接) 给你一个整数数组nums,找到其中最长严格递增子序列的长度. 子序列是由数组派生而来的序列,删除(或不删除)数组中的元素而不改变其余元素的顺序.例如,[3,6,2,7]是数组[0,3,1 ...

  9. 《Go程序设计语言》学习笔记之defer

    <Go程序设计语言>学习笔记之defer 一. 环境 Centos8.5, go1.17.5 linux/amd64 二. 概念 语法上,一个 defer 语句就是一个普通的函数或方法调用 ...

  10. ContiPerf是一个轻量级的测试工具,基于JUnit 4 开发,可用于效率测试等。

    1.在maven中使用ContiPerf <dependency> <groupId>junit</groupId> <artifactId>junit ...