Skip to content

Instantly share code, notes, and snippets.

@igmoweb
Created November 8, 2016 19:02
Show Gist options
  • Save igmoweb/f1b26c5a8870d8f30bbb0cc348ee617b to your computer and use it in GitHub Desktop.
Save igmoweb/f1b26c5a8870d8f30bbb0cc348ee617b to your computer and use it in GitHub Desktop.
Un cronómetro en React
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