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

    HDFS(Hadoop Distributed File System)就是hadoop分布式文件系统,fs是操作HDFS文件的一个常用命令. 1.hadoop fs -help 查看fs使用帮助 2 ...

  2. 内网学习之MySQL服务提权

    利用MySQL提权原理: 1.具有mysql的root权限,且mysql以system权限运行. 2.具有执行sql语句的权限,webshell或者外连皆可 UDF提权 UDF(user define ...

  3. OpenCL中读取image时的坐标

    本文测试OpenCL中读取image数据时关于坐标的两个问题: 使用float2坐标读取 使用int2坐标读取 首先完整的测试代码如下,测试平台为SDM855: #include <CL/cl. ...

  4. vim编辑超大文件

    进入大文件(12g,250w+ lines),vim,耐心等待 有两种方法编辑删除冗余字段 1.set number ,可以通过:+数字组合跳到指定行,输入命令   ":100,200d&q ...

  5. NIO学习笔记,从Linux IO演化模型到Netty—— Netty零拷贝

    Netty的中零拷贝与上述零拷贝是不一样的,它并不是系统层面上的零拷贝,只是相对于ByteBuf而言的,更多的是偏向于数据操作优化这样的概念. Netty中的零拷贝: 1.CompositeByteB ...

  6. Java-利用位数猜年龄

    题目: 美国数学家维纳(N.Wiener)智力早熟,11岁就上了大学.他曾在1935~1936年应邀来中国清华大学讲学.一次,他参加某个重要会议,年轻的脸孔引人注目.于是有人询问他的年龄,他回答说:“ ...

  7. c#---params参数

    写一个方法,求一个同学的总成绩 static void Main(string[] args) { , , }; Test("张三", n); Console.ReadKey(); ...

  8. 【python基础语法】字符串常用方法 、列表(第3天课堂笔记)

    """ 字符串的方法 join 字符串拼接,将列表转换为字符串 find 查找元素位置 count 查找元素个数 replace 替换字符 split 字符串分割,将字符 ...

  9. SP11470 TTM - To the moon[主席树标记永久化]

    SP11470 TTM - To the moon C l r d:区间 \([L,R]\) 中的数都加 d ,同时当前的时间戳加 1. Q l r:查询当前时间戳区间 \([L,R]\) 中所有数的 ...

  10. 转载 selenium_对浏览器操作、鼠标操作等总结

    https://www.jianshu.com/p/7a4414082ce2 查看环境conda info --env 激活环境conda activate machine 路径改成H:cd H:\p ...