React鼠标事件
说明:假设有一个用户名片,当鼠标滑到上面,显示用户详细信息,且用户详情卡片位置随鼠标位置改变而改变。
UI框架:Material-ui
实现思路:
1.一个用户简介组件A(用于展示用户列表);
2.一个用户详情组件B(用于展示用户详情);
3.在A组件里写鼠标事件,当鼠标滑到A上,显示B组件,鼠标滑出A,隐藏B组建
鼠标事件:onMouseOver onMouseOut
给A组件一个默认state属性,通过鼠标事件改变state值,并将state值传递给B组件
组件A
import React from 'react';
import { Card, CardHeader, CardText } from 'material-ui/Card';
import SocialPerson from 'material-ui/svg-icons/social/person';
import { blue500 } from 'material-ui/styles/colors';
import B from './B';
const styles = {
memberCardStyle: {
marginTop:20,
marginBottom:20,
marginLeft:15,
display:'inline-block',
width: '23%'
}
}
class A extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
detailShow: 'none',
x: 0,
y: 0
}
}
handleMouseOver = (e) => {
this.setState({
detailShow: 'block',
x: e.pageX, //pageX是以html左上角为原点,相应的clientX是以浏览器左上角为原点
y: e.pageY,
})
}
handleMouseOut = () =>{
this.setState({
detailShow: 'none',
x: 0,
y: 0
})
}
render() {
return (
<Paper style={styles.memberCardStyle}>
<Card
zDepth={1}
onMouseOver={this.handleMouseOver}
onMouseOut={this.handleMouseOut}
containerStyle={{paddingRight:0}}
>
<CardHeader
title="成员1"
titleStyle={{marginLeft:-10,marginTop:18,fontSize:16,paddingRight:"0 !important"}}
subtitle="gan.maoyou@datatom.com"
subtitleStyle={{marginLeft:-10,marginTop:10,paddingRight:"0 !important",fontSize:12}}
avatar={
<div style={{backgroundColor:blue500,width:60,height:70,display:'inline-block',textAlign:'center',marginLeft:-5,marginTop:-5,marginBottom:-5,}}>
<SocialPerson style={{width:60,height:70,color:'white'}}/>
</div>}
style={{paddingRight:"0 !important"}}
/>
</Card>
{/*将所需的值通过props传递给组件B*/}
<B
dx={this.state.x}
dy={this.state.y}
detailShow={this.state.detailShow}
/>
</Paper>
)
}
}
export default A;
组件B
import React from 'react';
import Card from 'material-ui/Card';
class B extends React.PureComponent {
constructor(props) {
super(props);
}
render() {
const { dx, dy , detailShow } = this.props;
return (
<Card style={{position:'absolute',top: dy, left: dx, display: detailShow}}>
<ul style={{listStyleType:'none',padding:15}}>
<li>成员角色:普通用户</li>
<li>用户ID:1234455</li>
<li>创建时间:2017/03/01</li>
</ul>
</Card>
)
}
}
export default B;
react鼠标事件集合:https://segmentfault.com/a/1190000004642694
React鼠标事件的更多相关文章
- react.js 从零开始(五)React 中事件的用法
事件系统 虚拟事件对象 事件处理器将会传入虚拟事件对象的实例,一个对浏览器本地事件的跨浏览器封装.它有和浏览器本地事件相同的属性和方法,包括 stopPropagation() 和 prevent ...
- React绑定事件动态化的实现方法
一.什么是绑定事件 1.1 事件 我这里指的事件一般指的是React自带的触发事件,我这里先简单举例几个 onClick //鼠标点击 onMouseEnter //鼠标滑进 onMouseLeave ...
- 整理之DOM事件阶段、冒泡与捕获、事件委托、ie事件和dom模型事件、鼠标事件
整理之DOM事件阶段 本文主要解决的问题: 事件流 DOM事件流的三个阶段 先理解流的概念 在现今的JavaScript中随处可见.比如说React中的单向数据流,Node中的流,又或是今天本文所讲的 ...
- 7.JAVA之GUI编程鼠标事件
鼠标事件: 功能: 1.基本窗体功能实现 2.鼠标移动监听,当鼠标移动到按钮上时,触发打印事件. 3.按钮活动监听,当按钮活动时,触发打印事件. 4.按钮被单击时触发打印事件. 源码如下: impor ...
- 手持设备点击响应速度,鼠标事件与touch事件的那些事
前言 现在一直在做移动端的开发,这次将单页应用的网页内嵌入了app,于是老大反映了一个问题:app应用点击响应慢!我开始不以为然,于是拿着网页版的试了试,好像确实有一定延迟,于是开始了研究,最后选择了 ...
- css屏蔽元素的鼠标事件pointer-events
// 屏蔽点击 $('body').css('pointer-events', 'none'); //恢复默认 $('body').css('pointer-events', 'auto'); 用 ...
- 深入学习jQuery鼠标事件
× 目录 [1]类型 [2]写法 [3]合成事件[4]鼠标按键[5]修改键[6]坐标位置 前面的话 鼠标事件是DOM事件中最常用的事件,jQuery对鼠标事件进行了封装和扩展.本文将详细介绍jQuer ...
- 深入理解DOM事件类型系列第一篇——鼠标事件
× 目录 [1]类型 [2]顺序 [3]坐标位置[4]修改键[5]相关元素[6]鼠标按键[7]滚轮事件[8]移动设备 前面的话 鼠标事件是web开发中最常用的一类事件,毕竟鼠标是最主要的定位设备.本文 ...
- winform/窗体鼠标事件编程中的几个问题
1.进行.net窗体的开发,经常用到鼠标事件,如MouseDown/MouseUp/MouseMove/MouseClick等.可是有时候给控件添加鼠标事件,就是不响应,怎么办呢! 答案:1.控件是否 ...
随机推荐
- Java——String类总结---18.09.27
1.String类 String类在java.lang包中,java使用String类创建一个字符串变量,字符串变量属于对象.java把String类声明的final类,不能有类.String类对象创 ...
- 20155202 2016-2017-2 《Java程序设计》第9周学习总结
20155202 2016-2017-2 <Java程序设计>第9周学习总结 教材学习内容总结 整合数据库: JDBC驱动程序,按照方式分4种类型: Type1 : JDBC-ODBC B ...
- 2017-2018-1 20155330 《信息安全系统设计基础》第10周课堂测试&课下作业
2017-2018-1 20155330 <信息安全系统设计基础>第10周课堂测试&课下作业 stat命令的实现-mysate 学习使用stat(1),并用C语言实现 提交学习st ...
- BSGS算法总结
BSGS算法总结 \(BSGS\)算法(Baby Step Giant Step),即大步小步算法,用于解决这样一个问题: 求\(y^x\equiv z\ (mod\ p)\)的最小正整数解. 前提条 ...
- 获取当前页面的所有链接的四种方法对比(python 爬虫)
''' 得到当前页面所有连接 ''' import requests import re from bs4 import BeautifulSoup from lxml import etree fr ...
- 径向基(RBF)神经网络python实现
from numpy import array, append, vstack, transpose, reshape, \ dot, true_divide, mean, exp, sqrt, lo ...
- [HNOI2012]永无乡 线段树合并
[HNOI2012]永无乡 LG传送门 线段树合并练手题,写这篇博客只是为了给我的这篇文章找个板子题. 并查集维护连通性,对于不在同一个连通块内的合并操作每次直接合并两颗线段树,复杂度\(O(n \l ...
- Codeforces 909E. Coprocessor (拓扑、模拟)
题目链接: Coprocessor 题意: 给出n个待处理的事件(0 - n-1),再给出了n个标(0表示只能在主处理器中处理这个事件,1表示只能在副处理器中处理这个事件),处理器每次能处理多个任务. ...
- appium 遇到的坑
上周开始试着来用appium,首先开始去官网看,然后下载appium客户端,下载安装后,然后笔者开始安装android sdk ,进官网下载后,笔者下载安装后,在更新下载SDK Manager的时 ...
- 使用VMWareWorkstation10搭建学习环境笔记
第一节:介绍虚拟化技术 虚拟化技术1.在一台计算机运行多个操作系统2.教学环境 测试环境3.和硬件无关4.P to V 物理机->虚拟机(Physical to Virtual) V ...