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
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了