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 ...
随机推荐
- Python 编程入门(2):复杂数据类型(列表,字典)
以下所有例子都基于最新版本的 Python,为了便于消化,每一篇都尽量短小精悍,希望你能尽力去掌握 Python 编程的「概念」,可以的话去动手试一下这些例子(就算目前还没完全搞懂),加深理解. 在 ...
- 使用UCSC Genome Browser下载人类所有mRNA序列
打开UCSC Genome Browser官网.网址:http://genome.ucsc.edu/ 点击导航栏的Genome Data 在新的页面中,点击human,可快速定位至页面中人类基因组数据 ...
- LaTex安装介绍
写在前面 很多的会议.期刊要求投稿使用LaTex编辑,而不是Word,使用好LaTex后,论文的排版任务确实会变得轻松. 1.下载软件 LaTex有很多衍生版,常用的推荐是Tex live,安装方式选 ...
- 实验一Git代码版本管理
GIT代码版本管理 实验目的: 1)了解分布式分布式版本控制系统的核心机理: 2) 熟练掌握git的基本指令和分支管理指令: 实验内容: 1)安装git 2)初始配置git ,git init git ...
- IntelliJ IDEA 2018.3.2 永久破解
PS:动手能力强的来,手残的去淘宝买吧,大概15块钱1年.建议看完后在动手,有一个全局观,浪费不了多少时间 一. 下载破解补丁文件 链接:https://pan.baidu.com/s/1wFp14t ...
- git签名设置
作用:只区分不同开发人员的身份 一.项目级别/仓库级别:仅在当前本地库范围内有效 签名设置用户名(UserName)和邮箱(User@email),邮箱可以是任意邮箱(无效邮箱也可以) git con ...
- 【NLP】暑假课作业3 - 词性标注(简单词频概率统计)
作业任务: 使用98年人民日报语料库进行词性标注训练及测试. 作业输入: 98年人民日报语料库(1998-01-105-带音.txt),用80%的数据作为训练集,20%的数据作为验证集. 运行环境: ...
- Mybaits(10)N+1问题
N+1问题 从上面的例子日志中我们可以看到所有级联都成功了,但是引发了性能问题,例如我们在查询雇员的信息和工作任务信息,此时体检表和工牌信息就是多余,我们没必要查询一次.如果想日志体现的那样,取出了所 ...
- go 总结常用函数
golang截取字符串 对于字符串操作,截取字符串是一个常用的, 而当你需要截取字符串中的一部分时,可以使用像截取数组某部分那样来操作,示例代码如下: package main import &quo ...
- MY_0001:添加命令到自定义工具栏
1,按住 ctrl + shift 2,点击命令即可