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="[e-mail]"
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