Created
November 8, 2016 19:02
-
-
Save igmoweb/f1b26c5a8870d8f30bbb0cc348ee617b to your computer and use it in GitHub Desktop.
Un cronómetro en React
This file contains hidden or 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
import React, {PropTypes} from 'react'; | |
import Header from './Header'; | |
import Screen from './Screen'; | |
import Buttons from './Buttons'; | |
export default class Cronometro extends React.Component { | |
constructor() { | |
super(); | |
this.timer = null; | |
this.startedOn = 0; | |
this.state = { | |
elapsed: 0, | |
}; | |
this.start = this.start.bind( this ); | |
this.stop = this.stop.bind( this ); | |
} | |
start() { | |
this.startedOn = new Date().getTime(); | |
this.timer = window.setInterval( this.updateTime.bind( this ), 55 ); | |
} | |
updateTime() { | |
this.setState( {elapsed: new Date().getTime() - this.startedOn } ); | |
} | |
stop() { | |
window.clearInterval( this.timer ); | |
} | |
render() { | |
return <div className="crono"> | |
<Header text="Cronómetro"/> | |
<Screen elapsed={this.state.elapsed}/> | |
<Buttons onStart={this.start} onStop={this.stop}/> | |
</div>; | |
} | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment