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);
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: [],
})
}
}
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);
}
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: [],
})
}
}