React tutorial1-9

mixin

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 = (interval) => {
	return {
    componentDidMount(){
      this.__interval = setInterval(this.onTick,interval);
    },
    componentWillUnmount(){
      clearInterval(this.__interval);
    }
  }
}
var Timer = React.createClass({
	mixins:[IntervalMixin(1000)],
	getInitialState(){
  	return {
    	secondsElapsed:0
    }
  },
	onTick(){
  	this.setState({
			secondsElapsed:this.state.secondsElapsed+1
  	});
  },
  render(){
  	return(
    	<div>Seconds Elapsed : {this.state.secondsElapsed}</div>
    );
  }
});
ReactDOM.render(
  <Timer/>,
  document.getElementById('content')
);
</script>