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 ...
随机推荐
- Markdown语法,及其在typora中的快捷键,学写博客吧!!!
前言 Markdown (MD) 是现在最流行的一种文档书写语言格式.平常写笔记,写博客,写计划再好不过了.个人觉得使用很简单,右击鼠标,有你想要的操作. Typora是简洁.操作简单.功能强大.方便 ...
- Centos7下安装包方式安装MySQL
安装包下载地址:https://cdn.mysql.com//Downloads/MySQL-5.7/mysql-5.7.27-1.el7.x86_64.rpm-bundle.tar 第一步:在 /h ...
- sqlserver2014部署安装
百度云网址链接: https://pan.baidu.com/s/1BwgdnESI8Fqlos9EIOLv1A 提取码: wsy5 1.解压ISO镜像文件,点击setup安装程序 2.进入安装界面 ...
- Essential C++ 笔记-1
本文作者为C++初学者,学习之中难免有误,该文章仅为参考 面向对象概述 继承:改变类之间的关系 多态:让基类的pointer或refence得以十分透明的指向基类的某个派生对象 继承 继承发生在对象与 ...
- Linux中为什么执行自己的程序要在前面加./
前言 在Linux中,我们执行内置命令时,直接输入命令名称即可,如: $ mv a b #将a重命名为b 而在执行自己写好的程序时,却要带上./,例如: $ hello hello: comm ...
- React函数式组件使用Ref
目录: 简介 useRef forwardRef useImperativeHandle 回调Ref 简介 大家都知道React中的ref属性可以帮助我们获取子组件的实例或者Dom对象,进而对子组件进 ...
- 限定输入框只能输入数字, TextBox的TextChanged事件调用
/// <summary> /// 限定输入框只能输入数字, TextBox的TextChanged事件调用 /// </summary> /// <param name ...
- C# DES加密、解密
/// <summary> /// DES加密字符串 /// </summary> /// <param name="pToEncrypt">待 ...
- 在windows系统下,配置vue项目一键启动文件
我的项目由客户端.后台管理.数据库和服务器三部分组件,每次启动项目都要一个一个启动,挺麻烦的,现在写一个.bat文件来批处理命令. 这个是我的启动文件内容. 第一行运行的我wampServer服务器, ...
- Linux网络课程学习第六天
本节课程主要内容:针对第四章节进行了收尾,以及对第五章的用户身份与文件权限进行了详细讲解. 学习心得:干货很多,收获满满.