我试图在react中创建一个简单的计时器组件,该组件将从父组件启动和停止。
这是我的父组件
Class Parent extends React.Component{
state = {
isRunning: true
}
render(){
return(
<div>
<Timer isRunning = {this.state.isRunning} />
</div>
)
}
}
这是我的计时器组件-
class Timer extends React.Component{
state = {
isRunning: this.props.isRunning,
secondElapsed : 65
}
getSeconds = function(){
return ('0'+this.state.secondElapsed % 60).slice(-2);
}
getMinutes = function(){
return Math.floor(this.state.secondElapsed / 60);
}
incrementTime = function(){
this.setState({
secondElapsed: (this.state.secondElapsed + 1)
})
}
handleTimer(){
if(this.state.isRunning){
this.handleTimerStart()
}
else{
this.handleTimerStop()
}
}
handleTimerStart = function(){
this.timeIncrementer = setInterval(this.incrementTime, 1000);
}
handleTimerStop = function(){
clearInterval(this.timeIncrementer);
}
render(){
return(
<div>
<h4>{this.getMinutes()}:{this.getSeconds()}</h4>
{
this.handleTimer()
}
</div>
);
}
}
export default Timer;
我的问题是我在函数增量时间()中不断收到“ 无法读取未定义的属性'secondElapsed'”。
请帮助。