#6 不能摸的狗(二)


  • 0
    administrators

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

    完成 Dog 组件,当用户点击的时候会执行自身的 barkrun 方法。给这个 Dog 组件加上状态 isRunningisBarking,在进行相应的动作的时候设置为 true,停下来的时候设置为 false


  • 0
    administrators

    @fbb3682227 参考答案:

    class Dog extends Component {
      constructor () {
        super()
        this.state = {
          isRunning: false,
          isBarking: false
        }
      }
    
      bark () {
        console.log('bark')
        this.setState({ isBarking: true })
        setTimeout(() => this.setState({ isBarking: false }), 20)
      }
    
      run () {
        console.log('run')
        this.setState({ isRunning:true })
        setTimeout(() => this.setState({ isRunning: false }), 20)
      }
      
      handleClickOnDog () {
        this.bark()
        this.run()
      }
    
      render() {
        return (
          <div onClick={this.handleClickOnDog.bind(this)}>DOG</div>
        )
      }
    }
    
    

  • 0

    @胡子大哈 在 #6 不能摸的狗(二) 中说:

    setTimeout(() => this.setState({ isBarking: false }), 20)

    谢谢啦 我的也成功了 setTimeOut写成了 setinterval


  • 0
    administrators

    @fbb3682227 哈哈,真不错,可以本地跑一下,这些问题应该都可以避免掉。赞!👍


  • 0

    @胡子大哈 恩恩 谢谢啦 给个赞


  • 0

    class Dog extends React.Component {  
        constructor(props){
        super(props)
        this.state = {
          isBarking:false,
          isRunning:false
        }
     }
      bark(){
        console.log('barking')
        this.setState({isBarking:true})
        setTimeout( () => this.setState({ isBarking:false }),2000)
      }
     run(){
       console.log('running')
       this.setState({isRunning:true})
        setTimeout( () => this.setState({ isRunning:false }),2000)
     }
    
      handleClick=()=>{
        this.bark();
        this.run();  
      }
      render () {
        return (
          <div onClick={this.handleClick.bind(this)}>DOG</div>
        )
      }
    }
    

    这样写在本地没问题,怎么提交的时候就提示说
    Wrong Answer
    一段时间后你需要设置小狗的 isRunning 状态为 false


  • 0
    administrators

    @Hazel 注意题目说的:

    这只狗跑一段时间(20~50ms)以后就会停下来,也不叫了。


  • 0

    有两个问题,麻烦请教一下

    1. 如果不写handleClickOnDog函数,然后
      <div onClick={this.handleClick.bind(this)}>DOG</div>
      这句 如果写成
      <div onClick={this.bark(), this.run()}>DOG</div>
      结果会报程序运行超时。这种写法哪里有误吗?

    2.<div onClick={this.handleClick.bind(this)}>DOG</div>
    这句代码里的两个this分别怎么理解?

    请大神指教


  • 0

    @胡子大哈
    run(){
    console.log('running')
    this.setState({isRunning:true})
    setTimeout( () => this.setState({ isRunning:false }),2000)
    }

    这样写有什么问题吗,我在本地跑都没问题呀


  • 2
    administrators

    @漫游CHEER

    1. {} 只能接受 JS 表达式,onClick 接受的表达式返回结果需要是一个函数。this.bark(), this.run() 不是一个表达式,返回结果也不是函数。
    2. 要理解这两个 this 需要比较深刻理解 JS 里面的 this 机制,这个不属于 React 范围了,可能需要补充相关的知识点哈。JavaScript 里面的函数 this 什么时候指向哪个对象是有讲究的。

  • 0
    administrators

    @Hazel 注意题目说的:

    这只狗跑一段时间(20~50ms)以后就会停下来,也不叫了。


  • 0
    administrators

    @胡子大哈 20ms ~ 50ms


  • 0

    @胡子大哈 我晕。。。。


  • 0

    @胡子大哈 好的,我再去补补课。谢谢啦!


  • 0

    你好。为什么我提交代码的时候报错了呢?![alt text](image url!http://ongbu23mm.bkt.clouddn.com/reactJS.png)


  • 0
    administrators

    @niuniu 贴一下你代码?


  • 0

    @胡子大哈

    class Dog extends Component {
      constructor () {
        super()
        this.state = {
          isRunning: false,
          isBarking: false
        }
      }
      
     bark () {
        console.log('dog is barking!');
       this.setState ({
          isBarking: true,
        });
        
        setTimeout( () => {
          this.setState ({
            isBarking: false
          })
        },3000)
      }
      
      run () {
       this.bark();
        console.log('dog is running!');
        this.setState ({
          isRunning: true,
        });
        
        setTimeout( () => {
          this.setState ({
            isRunning: false
          })
        },2000)
      }
     
      render () {
        const {isRunning,isBarking} = this.state.isRunning;
        return (
          <div>
            <div onClick={this.run.bind(this)}>DOG</div>
            <div>{ isRunning ? 'the dog is running' : 'the dog stoped' }</div>
            <div>{ isBarking ? 'the dog is barking' : 'the dog stoped barking' }</div>
          </div>
         )
      }
    }
    

    刚刚又提交了一次,没有报上次那个错误了,提示我“小狗叫或者跑的时候你并没有进行 setState”。您帮我看看吧,谢谢你


  • 0

    @胡子大哈 setTimeout(() => this.setState({ isBarking: false }), 20) 这里为什么是return 新设置的值?不是只需要写这个设置语句就可以了?


  • 0

    @niuniu const {isRunning,isBarking} = this.state.isRunning;这条语句是做什么的?


  • 0

    我觉得很奇怪,这样的形式就报错是为什么,这里的写法是你上一个里面说的
    0_1496230663259_upload-aef61a5d-3d27-41c7-b03f-e3da73a17da4


登录后回复
 

与 ScriptOJ 的连接断开,我们正在尝试重连,请耐心等待