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 *函数

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值