有一只狗,不允许别人摸它,一旦摸它就会叫,然后就跑了;这只狗跑一段时间(20~50ms)
以后就会停下来,也不叫了。
完成 Dog
组件,当用户点击的时候会执行自身的 bark
和 run
方法。给这个 Dog
组件加上状态 isRunning
和 isBarking
,在进行相应的动作的时候设置为 true
,停下来的时候设置为 false
。
class Dog extends React.Component {
constructor () {
super()
this.state = {
isRunning: false,
isBarking: false
}
/* TODO */
this.handleClick = this.handleClick.bind(this)
}
handleClick(){
this.bark()
this.run()
setTimeout(()=>{
this.setState({
isRunning: false,
isBarking: false
})
}, 20)
}
bark () {
/* TODO */
this.setState({
isRunning: true
})
}
run () {
/* TODO */
this.setState({
isBarking: true
})
}
render () {
return (<div onClick={this.handleClick}>DOG</div>)
}
}