AntDesign(React)学习-7 Menu添加事件
今天花了大半天时间从老家回到工作地,路上因为肺炎封堵挺厉害,希望国家挺过这个难关,要不大家都失业可就惨了,上一篇做了一个展示数据的demo,这一篇研究antd Menu item点击事件
1、还是先看文档
在menu上增加onClick事件

2、handleClick代码如下
handleClick = e => {
console.log('click ', e);
};
3、可以在console里看到点击事件详情

4、为了将url传递过来,在Menu.Item上增加自定义属性
5、在handleClick中获取自定义属性并跳转
handleClick = e => {
console.log('click: ', e);
console.log('url:'+e.item.props["data-url"]);
router.push(e.item.props["data-url"]);
};
6、router.push需要使用组件
进行测试(只是为了测试,实际首页不是登录页)
7、点击首页跳转成功


AntDesign(React)学习-7 Menu添加事件的更多相关文章
- AntDesign(React)学习-6 Menu展示数据
1.官方文档请查看https://ant.design/components/menu-cn/antPro自带的菜单功能很强大,但是太复杂了,感觉大部分功能都用不上,下面实现一个简单从后台动态获取菜单 ...
- AntDesign(React)学习-8 Menu使用 切换框架页内容页面
本节实现一个点击左侧menu在右侧content切换页面效果,原始代码请从UMI学习-6开始看 1.在pages下添加两个组件,User,UserRole import React from 'rea ...
- AntDesign(React)学习-1 创建环境
目录: AntDesign(React)学习-15 组件定义.connect.interface AntDesign(React)学习-14 使用UMI提供的antd模板 AntDesign(Reac ...
- AntDesign(React)学习-12 使用Table
AntDesign(Vue)版的Table中使用图片https://www.cnblogs.com/zhaogaojian/p/11119762.html 之前在使用VUE版Table时,使用大图片时 ...
- AntDesign(React)学习-5 路由及使用Layout布局
前言:学习目标实现点击登录按钮,直接进入后台布局页面,类似下面antd官网文档展示效果 ant.design访问 https://ant-design.gitee.io/components/menu ...
- AntDesign(React)学习-11 使用mobx
mobx 是由 Mendix.Coinbase.Facebook 开源和众多个人赞助商所赞助的. mobx和redux类似,也可以用来进行状态管理,并且更简单,更灵活.初次研究,先实现一个最简单的功能 ...
- AntDesign(React)学习-4 登录页面提交数据简单实现
github代码:https://github.com/zhaogaojian/jgdemo 全国肺炎,过节期间没地方去在家学习antd. 一.感觉antd pro项目太庞大了,可以学习下结构和代码风 ...
- AntDesign(React)学习-3 React基础
前面项目已经建起来了,但是没有React基础怎么办,从头学习,这个项目使用的是基于React16.X版本的几种技术集成,那么我们就从网上找一些相关的资料进行研究,我的习惯是用到哪学到哪. 一.先看一些 ...
- AntDesign(React)学习-2 第一个页面
1.前面创建了第一个项目jgdemo,结构如下,使用TypeScript. 2.yarn start启动项目 3.点击GettingStarted是umi的官方网站 https://umijs.org ...
随机推荐
- springboot整合WebService简单版
一.什么是webservice 关于webservice的介绍摘自百度百科,上面的介绍很详细.(链接:https://baike.baidu.com/item/Web%20Service/121503 ...
- 快速读写模板(int)
一.快速读入模板(int) inline int read(int x){ char ch=getchar(); int x=0,f=1; while(ch>='9'||ch<='0'){ ...
- python——面向对象,继承
"""继承:子类继承父类1.单继承,多继承2. 子类调用或重用父类的同名属性和方法3. 多层4.私有属性和私有方法class 类名(object<父类>)&q ...
- 《趣谈 Linux 操作系统》学习笔记(一):为什么要学 Linux 及学习路径
前言:学习的课程来自极客时间的专栏<趣谈 Linux 操作系统>,作者用形象化的比喻和丰富的图片让课程变得比较易懂,为了避免知识看过就忘,打算通过写学习笔记的形式记录自己的学习过程. Li ...
- Linux内核本地提权漏洞(CVE-2019-13272)
漏洞描述 kernel / ptrace.c中的ptrace_link错误地处理了想要创建ptrace关系的进程的凭据记录,这允许本地用户通过利用父子的某些方案来获取root访问权限 进程关系,父进程 ...
- 论文阅读笔记(十五)【CVPR2016】:Top-push Video-based Person Re-identification
Approach 特征由两部分组成:space-time特征和外貌特征.space-time特征由HOG3D[传送门]提取,其包含了空间梯度和时间动态信息:外貌特征采用颜色直方图[传送门]和LBP[传 ...
- VS2019 backspace键失效,无法使用
原因:据网上其他资源了解,可能是和其它的快捷键冲突了,但是我这边没有设置快捷键,突然就这样了,出现原因不详,有了解的伙伴可以留言学习一下. 解决方法:工具=>设置=>键盘=>点击重置
- C# Socket的方式发送中文,接收方收到乱码
场景: 使用 Socket的方式向下位机发送中文信息,下位机收到的中文是乱码 原因: 了解到的原因是上位机与下位机的发送与接收的编码与解码方式不一致 比如上位机采用 Encoding.UTF8.Get ...
- Python 函数 初学者笔记
定义函数 def greet_user(username):#定义一个名为greet_user的函数,username时个形参 print("Hello!" + usernam ...
- javaweb实现注册页面(数据库连接以及ajax验证)
先放效果图 可实现js实时验证 可实现ajax实时验证注册信息是否存在 页面实现要求 1登录账号:要求由6到12位字母.数字.下划线组成,只有字母可以开头:(1分) 2登录密码:要求 ...