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

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. Java——String类总结---18.09.27

    1.String类 String类在java.lang包中,java使用String类创建一个字符串变量,字符串变量属于对象.java把String类声明的final类,不能有类.String类对象创 ...

  2. 20155202 2016-2017-2 《Java程序设计》第9周学习总结

    20155202 2016-2017-2 <Java程序设计>第9周学习总结 教材学习内容总结 整合数据库: JDBC驱动程序,按照方式分4种类型: Type1 : JDBC-ODBC B ...

  3. 2017-2018-1 20155330 《信息安全系统设计基础》第10周课堂测试&课下作业

    2017-2018-1 20155330 <信息安全系统设计基础>第10周课堂测试&课下作业 stat命令的实现-mysate 学习使用stat(1),并用C语言实现 提交学习st ...

  4. BSGS算法总结

    BSGS算法总结 \(BSGS\)算法(Baby Step Giant Step),即大步小步算法,用于解决这样一个问题: 求\(y^x\equiv z\ (mod\ p)\)的最小正整数解. 前提条 ...

  5. 获取当前页面的所有链接的四种方法对比(python 爬虫)

    ''' 得到当前页面所有连接 ''' import requests import re from bs4 import BeautifulSoup from lxml import etree fr ...

  6. 径向基(RBF)神经网络python实现

    from numpy import array, append, vstack, transpose, reshape, \ dot, true_divide, mean, exp, sqrt, lo ...

  7. [HNOI2012]永无乡 线段树合并

    [HNOI2012]永无乡 LG传送门 线段树合并练手题,写这篇博客只是为了给我的这篇文章找个板子题. 并查集维护连通性,对于不在同一个连通块内的合并操作每次直接合并两颗线段树,复杂度\(O(n \l ...

  8. Codeforces 909E. Coprocessor (拓扑、模拟)

    题目链接: Coprocessor 题意: 给出n个待处理的事件(0 - n-1),再给出了n个标(0表示只能在主处理器中处理这个事件,1表示只能在副处理器中处理这个事件),处理器每次能处理多个任务. ...

  9. appium 遇到的坑

    上周开始试着来用appium,首先开始去官网看,然后下载appium客户端,下载安装后,然后笔者开始安装android sdk   ,进官网下载后,笔者下载安装后,在更新下载SDK Manager的时 ...

  10. 使用VMWareWorkstation10搭建学习环境笔记

    第一节:介绍虚拟化技术 虚拟化技术1.在一台计算机运行多个操作系统2.教学环境 测试环境3.和硬件无关4.P to V   物理机->虚拟机(Physical to Virtual)    V ...