react+ant练习
react + antd
一个管理后台会是什么样子?
一个用来展示信息的表格
一个隐藏的Modal,modal中是一个form这个modal可以用来新增或者修改一行数据。
一个搜索表单,表单也是form
一个search按钮
一个添加按钮
一个修改按钮
一个删除按钮
antd表格Table
<Table>
antd表单
如果你的页面有多个<Form>
那也是ok的,但要注意名字要是唯一的,因为最后通过 this.props.form.getFieldsValue()来获取数据的时候是把所有的name都获取到
除非你有了特别的操作,不然你的Form和state并没有建立练习
使用antd的Form最后要加上下面的语句
MyForm = Form.create()(MyForm)
export default MyForm;
可以使用react开发工具来观察组织结构,发现react把form当作一个props传给我们的MyForm
antd modal
Modal里面使用了Form
点击表格的一行,把record传给onClick函数,把record存到state
Modal里面是Form, Form的初始值取自state
概念
antd
dva
umi
学习链接
https://www.yuque.com/ant-design/course/layout
https://github.com/sorrycc/blog/issues/62
工具
redux开发者工具
https://github.com/zalmoxisus/redux-devtools-extension#usage
es6 *函数
react+ant练习相关推荐
- 使用create-react-app搭建TypeScript+React+Ant Design开发环境
一.使用create-react-app创建一个支持TypeScript+React的开发环境: 要创建一个支持TypeScript的Create React App项目,可以运行: npx crea ...
- React Ant design pro 访问服务器接口,获取数据显示
React Ant design pro 访问服务器接口 一.前两天更新了Ant design pro环境搭建,需要了解的小伙伴可以看一下之前的内容,还有react基础教程噢. 二.框架搭建完后,一般 ...
- react ant design pro typescript springboot activiti权限、工作流框架
是什么? 使用springboot,activiti,mybatis,react,ant design pro,typescript 开发的后台管理系统(包含权限管理.工作流等功能),真正前后端分离的 ...
- react ant protable自定义搜索下拉框
1.背景 select选择框很常见,这里实现 react ant protable实现自定义搜索下拉框 2.coding const [selectEnum, setSelectEnum] = use ...
- 【React自制全家桶】一、Webstrom+React+Ant Design+echarts搭建react项目
前言 一.React是Facebook推出的一个前端框架,之前被用于著名的社交媒体Instagram中,后来由于取得了不错的反响,于是Facebook决定将其开源.出身名门的React也不负众望,成功 ...
- React + Ant Design Pro项目实现keep-alive页签
背景 PC端管理系统,采用 ant design pro 方案,它是阿里的一个管理系统框架,技术栈是react. 相比vue,react一个先天不足是不支持 keep-alive,所以管理系统中的多页 ...
- React Ant Design Menu导航菜单跳转
昨天小编在学习React使用Ant Design Menu导航菜单时,发现Ant Design4.2版本之后的 Menu 导航菜单更新了写法.新写法不再需要自行拼接 JSX,直接采用数组写法直接用 i ...
- react+ant design Breadcrumb面包屑组件
import React from 'react'; import { Link }from 'react-router-dom'; import { Breadcrumb } from 'antd' ...
- React Ant Design UI 图片上传组件 代码片段
用户可以上传图片并在列表中显示缩略图.当上传照片数到达限制后,上传按钮消失. import { Upload, Icon, Modal } from 'antd';class PicturesWall ...
最新文章
- S标签实际大全(struts2)
- java整数转二进制字符串_在Java中将int转换为二进制字符串表示形式?
- 【Fragment】onActivityResult
- 安卓开发学习日记 DAY5——监听事件onClick的实现方法
- app专项测试(稳定性测试、安全性测试)
- 实现wordpress的首页文章摘要!
- CRM one order callback
- 孙鑫MFC笔记之十四--多线程同步与异步套接字编程
- 【模式识别】K均值聚类算法应用实验报告及MATLAB仿真
- java 添加注解_你知道Java中的package-info的作用吗?
- 家里没什么菜的飞鸽传书
- 语言 物品竞拍系统_整理家务不用愁!HSR家庭自主整理机器人系统
- linux系统如何创建python文件_Linux搭建python环境详解
- PHP下SESSION无法跨页传递的解决
- 2022 SpringBoot的房屋租赁平台 房屋展示平台 留学生房屋租赁平台
- 遇到 oracle 错误 904,EXP-00008: 遇到 Oracle 错误 904
- 智慧树omg期末测试答案_智慧树求职omg第十五章节测试答案
- win8.1系统自带微软拼音输入法卸载教程
- JSON和list之间的转换
- 不动点迭代以及其收敛性