React tutorial1-10

mixin-2

by catfood

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div id="content"></div>
<script type="text/babel">
var IntervalMixin = {
		setInterval(callback,interval){
    	var token = setInterval(callback,interval);
      this.__intervals.push(token);
      return token;
    },
    componentDidMount(){
      this.__intervals = [];
    },
    componentWillUnmount(){
      this.__intervals.map(clearInterval)
    }
}
var Timer = React.createClass({
	mixins:[IntervalMixin],
	getInitialState(){
  	return {
    	secondsElapsed:0
    }
  },
  componentDidMount(){
  	this.setInterval(this.onTick.bind(this),1000);
  },
	onTick(){
  	this.setState({
			secondsElapsed:this.state.secondsElapsed+1
  	});
  },
  render(){
  	return(
    	<div>Seconds Elapsed : {this.state.secondsElapsed}</div>
    );
  }
});
ReactDOM.render(
  <Timer/>,
  document.getElementById('content')
);
</script>