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股票量化 选股操作不好用 完结
这几日,写了一些python的代码,打算来选择股票的, 那么这个思路和开始的一篇文章类似,你会不会被贾跃亭坑?,所以基本的思路也是这样的,举一个简单的例子,就是通过连续几年的ROE数据,和其他的一些财 ...
- Linux服务器配置GPU版本的pytorch Torchvision TensorFlow
最近在Linux服务器上配置项目,项目需要使用GPU版本的pytorch和TensorFlow,而且该项目内会同时使用TensorFlow的GPU和CPU. 在服务器上装环境,如果重新开始,就需要下载 ...
- 测试.NET core MiddleWare 运行逻辑
话不多说,直接开整. 首先创建一个.NET CORE web 工程,创建完成之后,会自动创建相关文件如图(本示例基于.NET CORE 3.0): 打开Startup.cs可以看到在Configure ...
- AI Web 1.0
kali:192.168.0.103 目标机:192.168.0.105 0X01 端口和目录扫描 打开目标主页没有任何信息 a) 端口扫描 只有一个80端口开启 b) 目录扫描 0x03 查看敏感目 ...
- Centos7下安装包方式安装MySQL
安装包下载地址:https://cdn.mysql.com//Downloads/MySQL-5.7/mysql-5.7.27-1.el7.x86_64.rpm-bundle.tar 第一步:在 /h ...
- 牛客网剑指offer第19题——顺时针打印矩阵
这个题看似很简单: 题目: 输入一个矩阵,按照从外向里以顺时针的顺序依次打印出每一个数字,例如,如果输入如下4 X 4矩阵: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 1 ...
- 【Asp.net】 七大内置对象
本文主要分析Asp.net的7大内置对象. 利用提供的内置对象可以实现页面之间的数据传递和一些特定的功能,如数据输出,页面重定向等.5个核心常用内置对象分别是Application,Session, ...
- 基于java开发jsp+ssm+mysql实现的在线考试系统 源码下载
实现的关于在线考试的功能有:用户前台:用户注册登录.查看考试信息.进行考试.查看考试成绩.查看历史考试记录.回顾已考试卷.修改密码.修改个人信息等,后台管理功能(脚手架功能不在这里列出),科目专业管理 ...
- 50元求解pyqt加载并显示pdf问题
50块钱求解决pyqt5加载pdf文档并显示,类似briss软件的效果
- SQL Server远程数据库操作(备份、还原等)
· SQL Server远程数据库备份到本地: exp sauser/sapassword@192.168.8.233:1433/DBName file=d:/backup.dmp OWNER=sum ...