Created
June 13, 2018 07:26
-
-
Save hg-pyun/f0e6a0b8a9d532d5b9fed1baac87ad81 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
class Cat extends React.Component { | |
render() { | |
const mouse = this.props.mouse; | |
return ( | |
<img src="/cat.jpg" style={{ position: 'absolute', left: mouse.x, top: mouse.y }} /> | |
); | |
} | |
} | |
class MouseWithCat extends React.Component { | |
constructor(props) { | |
super(props); | |
this.handleMouseMove = this.handleMouseMove.bind(this); | |
this.state = { x: 0, y: 0 }; | |
} | |
handleMouseMove(event) { | |
this.setState({ | |
x: event.clientX, | |
y: event.clientY | |
}); | |
} | |
render() { | |
return ( | |
<div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}> | |
{/* | |
We could just swap out the <p> for a <Cat> here ... but then | |
we would need to create a separate <MouseWithSomethingElse> | |
component every time we need to use it, so <MouseWithCat> | |
isn't really reusable yet. | |
*/} | |
<Cat mouse={this.state} /> | |
</div> | |
); | |
} | |
} | |
class MouseTracker extends React.Component { | |
render() { | |
return ( | |
<div> | |
<h1>Move the mouse around!</h1> | |
<MouseWithCat /> | |
</div> | |
); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment