(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 复制代码 ...
随机推荐
- tomcat startup.bat 包含springboot的输出 里面乱码的解决方案
springboot输出是用的 logger 它的编码是 UTF-8 tomcat 默认也是UTF-8 但是win10 默认的 命令窗口是 GBK的,如果把tomcat 和 springboot的格式 ...
- Apollo3 Blue SoC 和 Apollo3 Blue Plus SoC的区别
一 芯片简介 1.简介 Apollo3 Blue系列SoC解决方案代表了超低功耗设计的巨大飞跃,其运行模式和睡眠模式下的功耗数值均十分出色,并且具有高性能的处理引擎. Apollo3Blue器件提供了 ...
- spring boot 自动装载对象为null问题的解决
情况描述 有个Server类,成员变量是spring中自动管理的bean类对象 public class Server { @Autowired private CommandMapper comma ...
- day12-面向对象03
面向对象03 10.抽象类 abstract修饰符可以用来修饰方法也可以修饰类,如果修饰方法,那么该方法就是抽象方法:如果修饰类,那么该类就是抽象类 抽象类中可以没有抽象方法,但是有抽象方法的类一定要 ...
- 获取Android设备系统apk
前提条件是:电脑adb连接Android设备 打开命令好窗口,输入指令adb shell "dumpsys window|grep mCurrentFocus" 输入指令adb s ...
- 博客调整为MarkDown和图床外链、配置Gitee作为图床
PS:要转载请注明出处,本人版权所有. PS: 这个只是基于<我自己>的理解, 如果和你的原则及想法相冲突,请谅解,勿喷. 前置说明 本文作为本人csdn blog的主站的备份.(Bl ...
- 记录--ThreeJs手搓一个罗盘特效
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 先上效果 前言 最近在学Three.js.,对着文档看了一周多,正好赶上码上掘金的活动,就顺便写了一个小demo,手搓一个罗盘特效. 太极 ...
- 第145篇:js设计模式注册模式及相应实践
好家伙, 0.索引 在阿里的低开项目中,使用这种形式去注册组件,我不禁好奇,这到底是个什么玩意 1.概念 在 JavaScript 中,注册模式(Registry Pattern)是一种设计模式 ...
- Mysql中的锁(case篇)
case1(表锁的读-写-读阻塞) 上篇文档中提到过 WRITE locks normally have higher priority than READ locks to ensure that ...
- oracle job 带参数
declare job number; begin sys.dbms_job.submit(job => job, what => 'DECLARE S1 VARCHAR2(4000); ...