今天花了大半天时间从老家回到工作地,路上因为肺炎封堵挺厉害,希望国家挺过这个难关,要不大家都失业可就惨了,上一篇做了一个展示数据的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需要使用组件

import router from 'umi/router';
修改以下代码为

进行测试(只是为了测试,实际首页不是登录页)

7、点击首页跳转成功

AntDesign(React)学习-7 Menu添加事件的更多相关文章

  1. AntDesign(React)学习-6 Menu展示数据

    1.官方文档请查看https://ant.design/components/menu-cn/antPro自带的菜单功能很强大,但是太复杂了,感觉大部分功能都用不上,下面实现一个简单从后台动态获取菜单 ...

  2. AntDesign(React)学习-8 Menu使用 切换框架页内容页面

    本节实现一个点击左侧menu在右侧content切换页面效果,原始代码请从UMI学习-6开始看 1.在pages下添加两个组件,User,UserRole import React from 'rea ...

  3. AntDesign(React)学习-1 创建环境

    目录: AntDesign(React)学习-15 组件定义.connect.interface AntDesign(React)学习-14 使用UMI提供的antd模板 AntDesign(Reac ...

  4. AntDesign(React)学习-12 使用Table

    AntDesign(Vue)版的Table中使用图片https://www.cnblogs.com/zhaogaojian/p/11119762.html 之前在使用VUE版Table时,使用大图片时 ...

  5. AntDesign(React)学习-5 路由及使用Layout布局

    前言:学习目标实现点击登录按钮,直接进入后台布局页面,类似下面antd官网文档展示效果 ant.design访问 https://ant-design.gitee.io/components/menu ...

  6. AntDesign(React)学习-11 使用mobx

    mobx 是由 Mendix.Coinbase.Facebook 开源和众多个人赞助商所赞助的. mobx和redux类似,也可以用来进行状态管理,并且更简单,更灵活.初次研究,先实现一个最简单的功能 ...

  7. AntDesign(React)学习-4 登录页面提交数据简单实现

    github代码:https://github.com/zhaogaojian/jgdemo 全国肺炎,过节期间没地方去在家学习antd. 一.感觉antd pro项目太庞大了,可以学习下结构和代码风 ...

  8. AntDesign(React)学习-3 React基础

    前面项目已经建起来了,但是没有React基础怎么办,从头学习,这个项目使用的是基于React16.X版本的几种技术集成,那么我们就从网上找一些相关的资料进行研究,我的习惯是用到哪学到哪. 一.先看一些 ...

  9. AntDesign(React)学习-2 第一个页面

    1.前面创建了第一个项目jgdemo,结构如下,使用TypeScript. 2.yarn start启动项目 3.点击GettingStarted是umi的官方网站 https://umijs.org ...

随机推荐

  1. 9maven依赖传递性、依赖原则

    maven的依赖传递: A.jar->B.jar->C.jar 要使 A.jar ->C.jar:当且仅当 B.jar 依赖于C.jar的范围是compile,如果B依赖于C的范围不 ...

  2. mssql sqlserver 如何将一个日期数据转换为"年份-月份"的格式呢?

    摘要: 下文讲述在sqlserver数据库中,将日期数据转换为指定格式的方法分享,如下所示: 实验环境:sqlserver 2008 R2 实现思路: 实现方法1: 使用year函数和month函数获 ...

  3. R语言矩阵维度“消失”的问题

    矩阵(matrix)是R语言中很基础的一种数据结构,也是R语言使用者经常使用的一种数据结构.矩阵的维度一般为二维(m*n). R语言中矩阵的操作是非常简单易懂的,但是在对R语言做矩阵操作时,有个地方需 ...

  4. POJ - 1426-Find The Multiple-专为小白解惑-同余加搜索树

    题意:给出一个整数n,(1 <= n <= 200).求出任意一个它的倍数m,要求m必须只由十进制的'0'或'1'组成,m不超过100位. 解题思路:首先大家应该会想到暴力枚举每一个m,但 ...

  5. HTML与CSS学习

    HTML和CSS都是对页面前端的设计语言,两者是页面设计所必需掌握的两种语言.我自己的理解就是两种语言其中的HTML语言是一种标记语言,主要是对于页面的内容进行编写,表示.将自己想要在网页中表示的内容 ...

  6. 安装Nginx到Linux(源码)

    运行环境 系统版本:无 软件版本:无 硬件要求:无 安装过程 NGINX官方提供源码包的下载,NGINX有两个版本Mainline(主线)版和Stable(稳定)版.主线版本我们可以理解为是开发版本, ...

  7. 使用 Jest 进行愉快的 JavaScript(TypeScript) 测试

    一般我们不管是做前端还是后端,为了提高代码的质量,会选择一种测试驱动开发(TDD)的办法来写代码进行单元测试.Jest 是 Facebook 团队开发的一款测试框架,为的是提高开发者的"开发 ...

  8. Luogu1738 | 洛谷的文件夹 (Trie+STL)

    题目描述 kkksc03是个非凡的空想家!在短时间内他设想了大量网页,然后总是交给可怜的lzn去实现. 洛谷的网页端,有很多文件夹,文件夹还套着文件夹. 例如:\(/luogu/application ...

  9. 当课堂因监控技术变“囚笼”,存在争议的AI使用场景该被抵制吗?

    当马云和马斯克高谈阔论AI是否会影响人类社会时,尚无"感情"的AI已在校园中"作恶".近日,一张AI监控课堂的GIF在网上迅速刷屏.这张GIF中记录了课堂中所有 ...

  10. canvas手势解锁源码

    先放图 demo.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...