react_module

import React, { Component} from 'react';
export default class TimerWatch extends Component{

    constructor(props){
        super(props);
        this.count = 0;
        this.state = {
            count:0,
            record:'',
            records:[],
        }
    }

    render(){
        let results = this.state.records.map((item) => {
            return <h1>{item}</h1>;
        });
        return(
            <div>
                <p>{this.state.count}</p>
                <button onClick={this.start.bind(this)}>开始</button>
                <button onClick={this.stop.bind(this)}>停止</button>
                <button onClick={this.back.bind(this)}>归零</button>
                <button onClick={this.record.bind(this)}>记录</button>
                <button onClick={this.recordBack.bind(this)}>记录清零</button>
                {results}
            </div>
        )
    }


    start(){
        //  console.log('start');
         this.timer = setInterval(() => {
            // console.log(this.state.count);
            const num = this.state.count;
            this.setState({
                count: num + 1,
            })
         },10);
        // console.log('timer: ' + this.state.count);
    }

    stop(){
        clearTimeout(this.timer);
    }

    back(){
        this.setState({
             count: 0,
         })
        clearTimeout(this.timer);

    }

    record(){
        console.log('record + ' + this.state.count);
        const rec = this.state.count;
        
        const recs = this.state.records;
        recs.push(rec);
            
        this.setState({
            records:recs,
        })
        console.log(this.state.records);
    }

    recordBack(){
        this.setState({
            records: [],
        })
    }
}