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

    概述 ffmpeg是什么? FFmpeg是一套可以用来记录.转换数字音频.视频,并能将其转化为流的开源计算机程序.并且,很多视频播放器都是采用他的内核. 安装与使用 安装ffmpeg ffmpeg下载 ...

  2. Numerical Testing Reportes of A New Conjugate Gradient Projection Method for Convex Constrained Nonlinear Equations

    Numerical Testing Reportes of A New Conjugate Gradient Projection Method for Convex Constrained Nonl ...

  3. C# monitor keyboard and mouse actions based on MouseKeyHook.

    1.Install-package MouseKeyHook 2. using Gma.System.MouseKeyHook; using System; namespace ConsoleApp1 ...

  4. opencv —— 官方 示例程序

    OpenCV 官方提供的示例程序,具体位于...\opencv\sources\samples\cpp 目录下. ...\opencv\sources\samples\cpp\tutorial_cod ...

  5. UVA-1588

    只用C来写 题目:https://vjudge.net/problem/UVA-1588 #include<stdio.h> #include<string.h> #defin ...

  6. Java不同单词个数统计

    描述 编写一个程序,输入一个句子,然后统计出这个句子当中不同的单词个数.例如:对于句子“one little two little three little boys”,总共有5个不同的单词:one, ...

  7. 剑指offer-面试题15-二进制中1的个数-位运算

    /* 题目: 二进制中1的个数,例如9为1001,有2位1. */ /* 思路: 算法2: 左移unsigned类型flag=1,和n做&运算,当flag移动中1的位置与n对应位置也为1时,则 ...

  8. Codeforces Round #592 (Div. 2) D - Paint the Tree

    题目链接:https://codeforces.com/contest/1244/problem/D 题意:给你一个树,让你把树上的每个节点染成三种颜色,使得任意三个互相相邻的节点颜色都不一样(意思是 ...

  9. 关于Comparable和Comparator那些事

    在实际项目开发过程中,我们经常需要对某个对象或者某个集合中的元素进行排序,常用的两种方式是实现某个接口.常见的可以实现比较功能的接口有Comparable接口和 Comparator接口,那么这两个又 ...

  10. Centos7 同时运行PHP5.2和PHP7.1配置

    工作环境一直都是lnmp,其中PHP已经升级到7.1版本了.突然有份代码需要运行在PHP5.2上.但是之前的环境还是需要的,所以需要在centos中再安装PHP5.2. 0.之前的php7安装在/us ...