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 ...
随机推荐
- 后端跨域的N种方法
简单来说,CORS是一种访问机制,英文全称是Cross-Origin Resource Sharing,即我们常说的跨域资源共享,通过在服务器端设置响应头,把发起跨域的原始域名添加到Access-Co ...
- C#设计模式学习笔记:(3)抽象工厂模式
本笔记摘抄自:https://www.cnblogs.com/PatrickLiu/p/7596897.html,记录一下学习过程以备后续查用. 一.引言 接上一篇C#设计模式学习笔记:简单工厂模式( ...
- idea中MavenWeb项目不能创建Servlet的解决办法
问题 学习完maven后,用maven创建了一个web项目,然后在这个web项目中创建了一个java文件夹并标记这个目录为源码根目录,当我准备创建一个Servlet的时候发现没有,如下图 解决办法 1 ...
- WPF DataGrid标题Header Binding失效
前言:因业务需要对WPF中的DataGrid控件中的行数进行统计,同时把统计的行数显示在列标题上. 如果我们用常规的Binding手段更新DataGridTextColunm的Header的话是不会生 ...
- python之三目运算符的替代品?
# 不知曾几何时,你是否也觉得Python的三目运算写起来很麻烦呢?(没有过) # 比如: a, b = 3, 4 c = a if a > b else b d = a if a < b ...
- ADB之安装APK
一.下载安装adb工具 下载安装,cmd测试是否成功 二.连接设备 1.手机打开USB测试 2.测试连接 三.安装应用 adb -s [设备编号] install [apk的完整路径]
- scp 后台执行(防止大文件关闭会话丢失)
Linux scp 设置nohup后台运行 Linux scp 设置nohup后台运行 1.正常执行scp命令 2.输入ctrl + z 暂停任务 3.bg将其放入后台 1.正常执行scp命令 从or ...
- pygame 运行心理学问卷
import pygame import sys from pygame.locals import * # wait for keys to putdown def waitForKeys(keys ...
- hdu 1025 Constructing Roads In JGShining's Kingdom(最长上升子序列)
题意:贫穷和富有的城市都按顺序1-n排列,需要在中间建造尽可能多的道路,最多可以建造多少条? 解:如果条件这样给出,贫穷的城市按顺序排列,并且按顺序给出每个贫穷城市需要的资源,那么能建造的最多的道路数 ...
- C# ASCII码的转换、转义字符、对照表
var splitStr = new byte[] { 0x05, 0x0D, 0x0A };//var splitStr = new byte[] { 5, 13, 10 };这样写也可以 var ...