# 6 不能摸的狗

有一只狗,不允许别人摸它,一旦摸它就会叫,然后就跑了;这只狗跑一段时间(20~50ms)以后就会停下来,也不叫了。

完成 Dog 组件,当用户点击的时候会执行自身的 barkrun 方法。给这个 Dog 组件加上状态 isRunningisBarking,在进行相应的动作的时候设置为 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>)
  }
}

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一丶不能摸的狗。 条件: 有一只狗,不允许别人摸它,一旦摸它就会叫,然后就跑了;这只狗跑一段时间(20~50ms)...
    夜息白鸽阅读 385评论 0 0
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,868评论 18 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,020评论 25 708
  • 王小波说,人生很长,一定要和有趣的人在一起。 容貌总会随岁月改变,人会不可避免地衰老,可是对于生活的趣味却是历久弥...
    左岸萧萧阅读 427评论 0 0
  • 随着消费升级的进程不断加深,电商已经成为大众市场的重要组成部分,想想在去年创下 571 亿销量的 “双十一”,已经...
    罗聚客阅读 574评论 0 0