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

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. python基础学习1-生成器,递归函数

    #!/usr/bin/env python # -*- coding:utf-8 -*- li=[11,22,33,44,55] r= filter(lambda x:x>22,li) prin ...

  2. 关于DP和背包

    听说过动态规划(DP)的同学应该都知道有背包问题的存在. 首先我们来了解一下动态规划 基本思想: 动态规划算法通常用于求解具有某种最优性质的问题. 在这类问题中, 可能会有很多可行解.每一个解都对应于 ...

  3. PDO访问方式操作数据库

    mysqli是专门访问MySQL数据库的,不能访问其它数据库.PDO可以访问多种的数据库,它把操作类合并在一起,做成一个数据访问抽象层,这个抽象层就是PDO,根据类操作对应的数据库.mysqli是一个 ...

  4. SQL Server 中SELECT INTO 和 INSERT INTO SELECT 两种表复制语句

    1.INSERT INTO SELECT语句 语句形式为:Insert into Table2(field1,field2,...) select value1,value2,... from Tab ...

  5. MySQL数据库常用操作语法

    1. 数据库初始化配置 1.1. 创建数据库 create database apps character set utf8 collate utf8_bin;创建数据库”app“,指定编码为utf8 ...

  6. 微信小程序中的分享事件

    小程序的分享 onShareAppMessage(options)   在页面的js文件中定义了 onShareAppMessage 函数时,页面可以表示改页面可以转发.可以在函数中设置页面转发的信息 ...

  7. 动态权限<二>之淘宝、京东、网易新闻 权限申请交互设计对比分析

    移动智能设备的快速普及,给生活带来巨大的精彩,但是智能设备上用户的信息数据很多,隐私数据也非常多,各种各样的app可能通过各种方式在悄悄的收集用户数据,而用户的隐私就变得耐人寻味了.比如之前的可以无限 ...

  8. 算法设计:UNION-FIND算法实现

    在上周的算法设计课程中,我们学习了UNION-FIND算法,该算法用来对不相交集进行查询与合并操作,但任何优秀的算法都必须要用实际的代码来进行实现,接下来我们就来看看具体的代码实现 1. 不相关集数据 ...

  9. Unity学习笔记(4): 碰撞相关API

    Unity3D中的碰撞: 在unity中,有普通碰撞体Collider和触发器(Trigger)两种碰撞体,两个普通碰撞体会发生碰撞并产生力学现象,触发器则像是个无法触碰而又真实存在的东西,也会触发碰 ...

  10. 【Shader】这是一篇记录随笔,我要开始学Shader了!

    背景: 前天学校有场招聘会,转了一圈只看到一家和unity有关的公司,还是做VR游戏的,然后HR也很好说话.和我说话的HR正好是做UnityVR方面的,聊了会受益匪浅,自己就像是找到了方向似的,突然很 ...