说明:假设有一个用户名片,当鼠标滑到上面,显示用户详细信息,且用户详情卡片位置随鼠标位置改变而改变。

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鼠标事件的更多相关文章

  1. react.js 从零开始(五)React 中事件的用法

    事件系统   虚拟事件对象 事件处理器将会传入虚拟事件对象的实例,一个对浏览器本地事件的跨浏览器封装.它有和浏览器本地事件相同的属性和方法,包括 stopPropagation() 和 prevent ...

  2. React绑定事件动态化的实现方法

    一.什么是绑定事件 1.1 事件 我这里指的事件一般指的是React自带的触发事件,我这里先简单举例几个 onClick //鼠标点击 onMouseEnter //鼠标滑进 onMouseLeave ...

  3. 整理之DOM事件阶段、冒泡与捕获、事件委托、ie事件和dom模型事件、鼠标事件

    整理之DOM事件阶段 本文主要解决的问题: 事件流 DOM事件流的三个阶段 先理解流的概念 在现今的JavaScript中随处可见.比如说React中的单向数据流,Node中的流,又或是今天本文所讲的 ...

  4. 7.JAVA之GUI编程鼠标事件

    鼠标事件: 功能: 1.基本窗体功能实现 2.鼠标移动监听,当鼠标移动到按钮上时,触发打印事件. 3.按钮活动监听,当按钮活动时,触发打印事件. 4.按钮被单击时触发打印事件. 源码如下: impor ...

  5. 手持设备点击响应速度,鼠标事件与touch事件的那些事

    前言 现在一直在做移动端的开发,这次将单页应用的网页内嵌入了app,于是老大反映了一个问题:app应用点击响应慢!我开始不以为然,于是拿着网页版的试了试,好像确实有一定延迟,于是开始了研究,最后选择了 ...

  6. css屏蔽元素的鼠标事件pointer-events

    // 屏蔽点击 $('body').css('pointer-events', 'none'); //恢复默认 $('body').css('pointer-events', 'auto');   用 ...

  7. 深入学习jQuery鼠标事件

    × 目录 [1]类型 [2]写法 [3]合成事件[4]鼠标按键[5]修改键[6]坐标位置 前面的话 鼠标事件是DOM事件中最常用的事件,jQuery对鼠标事件进行了封装和扩展.本文将详细介绍jQuer ...

  8. 深入理解DOM事件类型系列第一篇——鼠标事件

    × 目录 [1]类型 [2]顺序 [3]坐标位置[4]修改键[5]相关元素[6]鼠标按键[7]滚轮事件[8]移动设备 前面的话 鼠标事件是web开发中最常用的一类事件,毕竟鼠标是最主要的定位设备.本文 ...

  9. winform/窗体鼠标事件编程中的几个问题

    1.进行.net窗体的开发,经常用到鼠标事件,如MouseDown/MouseUp/MouseMove/MouseClick等.可是有时候给控件添加鼠标事件,就是不响应,怎么办呢! 答案:1.控件是否 ...

随机推荐

  1. flink 常见问题整理

    1. xml-apis 冲突问题 javax.xml.parsers.FactoryConfigurationError: Provider for class javax.xml.parsers.D ...

  2. QTableWidget具体解释(样式、右键菜单、表头塌陷、多选等) (非代理)

    在公司公示Qt开发一段时间,表格用到不少,所以,今天在这做个总结,防止以后忘记. 下面为个人模拟Windows资源管理器的一个表单.(写的比較粗糙,谅解一下) 一.设置表单样式 table_widge ...

  3. 【HNOI2015】落忆枫音

    题面 题解 求一个有特殊性质的有向图的生成树的个数. 首先,有向图的生成树的个数可以用矩阵树定理,能够得到\(40\)分. 但是如果它是一个\(\mathrm{DAG}\)就很好做,枚举每一个点的父亲 ...

  4. 【SHOI2016】黑暗前的幻想乡

    题面 题解 如果没有建筑公司的限制,那么就是个\(\mathrm{Matrix\;tree}\)板子 其实有了也一样 发现\(n\leq 17\),考虑容斥 每次钦定一些建筑公司,计算它们包含的边的生 ...

  5. 【AHOI2012】信号塔

    题面 题解 xgzc怒切计算几何 最小圆覆盖板子题 整体算法如下: 枚举第一个点,考虑当前圆是否包含了这个点,如果没有,则把圆变成以这个点为圆心,半径为\(0\)的圆.再枚举第二个点,考虑圆是否包含了 ...

  6. 【LG3249】[HNOI2016]矿区

    [LG3249][HNOI2016]矿区 题面 洛谷 题解 先平面图转对偶图, 建好了对偶图之后随意拿出一个生成树,以无边界的范围为根. 无边界的范围很好求,用叉积算出有向面积时,算出来是负数的就是无 ...

  7. 快速搭建属于自己的mongodb数据库

    前言 MongoDB 是一个基于分布式文件存储的数据库.由C++语言编写,支持Windows,Linux,OSX,Solaris等平台,默认端口为27017,是一个效率非常高的nosql数据库. 我的 ...

  8. 通过XML文件实现人物之间的对话

    一.建立一个XML文档,放在项目中Assert/Resources/XML文件下 XML的内容如下: <?xml version="1.0" encoding="u ...

  9. Java子类初始化调用父类无参构造

    实在是服了自己,子类初始化调用父类无参构造这种初学者都应该知道的事,我给忘了. 记得当初看书的时候各种概念抄在笔记本上,再上机实践,以为一辈子都不会忘,还是给忘了. 这件事说明了两个问题: 1.我没有 ...

  10. 回顾下TCP/IP协议

    首先要知道什么是TCP/IP协议,从字面意思来看TCP是“Transmission Control Protocol”的缩写,也就是传输控制协议.IP是“Internet Protocol”的缩写,即 ...