#6 不能摸的狗(二)


  • 1

    @胡子大哈 看来是的了,谢谢大哈哥

    touch (){
        this.bark();
        this.run();
        setTimeout(()=>{
          this.setState((prevState)=>{
            return  {
              isBarking: !prevState.isBarking,
              isRunning: !prevState.isRunning
            }
          })
        },40);
      }
    

    这里改成这样写都是对的了,看来是之前我思路不清晰,谢谢啦~!


  • 1

    请教一下,还是有点不明白

    为什么在#5中,可以直接用

    render () {
        return (
            <div onClick={ this.run(),this.bark() }>DOG</div>
        )
    }
    
    

    但是在#6这个题目里面却只能用

    <div onClick={this.handleClickOnDog.bind(this)}>DOG</div>
    

    前面您解答其他人的回答看了,但是还是觉得不明,能否麻烦您详细解释一下呢?


  • 0

    
    class Dog extends Component {
      constructor(){
        super()
        this.state = {
          isRunning: false,
          isBarking: false
        }
      }
    
      // 随机数(秒数)
      getRandomArbitrary(min, max) {
      return Math.floor(Math.random() * (max - min)) + min;
      }
    
    
      run(){
        this.setState( {
          isRunning: true,
        })
        setTimeout(() => this.setState({ isRunning: false }), this.getRandomArbitrary(2000,5000)) //2~5秒, 20~50毫秒眼花+_+
      }
    
      bark(){
        this.setState( {
          isBarking: true,
        })
        setTimeout(() => this.setState({ isBarking: false }), this.getRandomArbitrary(2000,5000)) //2~5秒, 20~50毫秒眼花+_+
      }
    
      handleDog(){
        this.run()
        this.bark()
      }
    
      render(){
        return (
          <div>
            <button onClick={this.handleDog.bind(this)}>HandleDog</button>
            <h5>{this.state.isRunning ? 'Dog is Running' : 'Dog is stoped'}</h5>
            <h5>{this.state.isBarking ? 'Dog is Barking' : 'Dog is stop barking'}</h5>
          </div>
        )
      }
    }
    

  • 3

    @胡子大哈

    一段时间(20~50ms)这个应该是随机 我写了下

    @JonHo666#6 不能摸的狗(二) 中说:

    
    class Dog extends Component {
      constructor(){
        super()
        this.state = {
          isRunning: false,
          isBarking: false
        }
      }
    
      // 随机数(秒数)
      getRandomArbitrary(min, max) {
      return Math.floor(Math.random() * (max - min)) + min;
      }
    
    
      run(){
        this.setState( {
          isRunning: true,
        })
        setTimeout(() => this.setState({ isRunning: false }), this.getRandomArbitrary(2000,5000)) //2~5秒, 20~50毫秒眼花+_+
      }
    
      bark(){
        this.setState( {
          isBarking: true,
        })
        setTimeout(() => this.setState({ isBarking: false }), this.getRandomArbitrary(2000,5000)) //2~5秒, 20~50毫秒眼花+_+
      }
    
      handleDog(){
        this.run()
        this.bark()
      }
    
      render(){
        return (
          <div>
            <button onClick={this.handleDog.bind(this)}>HandleDog</button>
            <h5>{this.state.isRunning ? 'Dog is Running' : 'Dog is stoped'}</h5>
            <h5>{this.state.isBarking ? 'Dog is Barking' : 'Dog is stop barking'}</h5>
          </div>
        )
      }
    }
    

  • 0

    在做习题的时候,点击DOG后,执行bark函数:

    bark () {
        this.setState(() => 
             { return { isBarking: true } }
         )
         if(this.state.isBarking) {
             console.info('barking now')
         }
    }
    

    我知道setState无法实时改变,于是想改成书里的方法,传个参数:

    bark () {
        this.setState((prevState) => 
             { return { isBarking: true } }
         )
         if(prevState.isBarking) {
             console.info('barking now')
         }
    }
    

    但是会报 prevState 未定义,请问应该怎么修改?

    最后我使用了这种方法解决了问题:

     bark () {   
        this.setState(
            { isBarking: true }, () => {
                console.info('barking now')
            }
        )
      }
    

    但是我还是不大懂 这种写法与书里的写法的区别?


  • 0

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

  • 0

    class Dog extends Component {
    constructor(){
    super()
    this.state={
    isRunning:false,
    isBarking:false
    };
    }

    bark(){
    	console.log("cat is barking");
    	this.setState({isBarking:true})
    }
    
    run(){
    	console.log("cat is running");
    	this.setState({isRunning:true});
    }
    
    x(){
      this.bark();
      this.run();
      var time=Math.floor(Math.random()*31+20);
      setTimeout(()=>{this.setState({isRunning:false,isBarking:false})})
      
    }
    
    render(){
    	return (<div onClick={ this.x.bind(this) }>Hello</div>)
    }
    

    }


  • 0

    class Dog extends Component {
    constructor () {
    super()
    /* TODO */
    this.state={
    isRunning:false,
    isBarking:false
    }
    }

    bark () {
    /* TODO */
    this.setState({isBarking:true})
    this.run();
    }

    run () {
    /* TODO */
    var time=~~Math.random()*30+20;
    this.setState({isRunning:true});
    setTimeout(()=>{
    this.setState({isRunning:false,isBarking:false});
    },time)
    }

    render () {
    return (<div onClick={this.bark.bind(this)}>DOG</div>)
    }
    }


  • 0

    我贴出的代码啥格式都没有撒0 0


  • 0

    class Dog extends Component {
    constructor () {
    super();
    /* TODO */
    this.state = {
    isRunning:false,
    isBarking:false
    }
    }

    bark () {
    /* TODO */
    this.time("isBarking");
    }

    run () {
    /* TODO */
    this.time("isRunning");
    }
    time(name){
    this.setState({[name]:true});
    setTimeout(()=>{
    this.setState({[name]:false});
    },50)
    }
    render () {
    return (<div onClick={()=>{this.bark();this.run();}}>DOG</div>)
    }
    }


  • 0

    class Dog extends Component {

    constructor() {
        super()
        this.state = { isRunning: false }
        this.state = { isBarking: false }
    }
    stateSetting() {
        this.setstate = { isRunning: !this.state.isRunning }
        this.setstate = { isBarking: !this.state.isBarking }
    }
    Touch() {
        console.log('Touching dog!')
    }
    Bark() {
        console.log('Dog is barking')
    }
    Running() {
        console.log('Dog is running')
    }
    render() {
        return (
            <div onClick={() => { this.Touch(); this.Bark(); this.Running(); setTimeout(() => { this.stateSetting, console.log('Dog stop barking and running') },50)}}>
                Dog
            </div>
        )
    }
    

    }
    ReactDom.render(
    <Dog />,
    document.getElementById('root')
    )


  • 0

    @francis 我写的setInterval也没错啊
    run () {
    /* TODO */
    this.setState({isRunning: true})
    this.timer = setInterval(()=>{
    this.setState({isRunning: false, isBarking: false})
    }, 20);
    }


  • 0

    我在本地跑的没问题,怎么提交答案就老是报“Unknown Error”错误?
    下面是代码:
    0_1501814035743_upload-2aee2922-132d-4e43-a296-d165ef9944a7


  • 0

    class Dog extends Component {
        constructor () {
            super()
            this.state = {
                isRunning: false,
                isBarking: false
            }
        }
    
        bark () {
            console.log('barking');
            this.setState({
                isBarking: true
            })
        }
    
        run () {
            console.log('running');
            this.setState({
                isRunning: true
            })
        }
    
        // 随机数(秒数)
        getRandomArbitrary(min, max) {
            return Math.floor(Math.random() * (max - min)) + min;
        }
    
        touch() {
            this.bark();
            this.run();
    
            // 函数调用
            setTimeout(() => this.stop(), this.getRandomArbitrary(2000, 5000));
    
            // 函数申明
            // setTimeout(this.stop.bind(this), this.getRandomArbitrary(2000, 5000));
        }
        
        stop() {
            console.log('停止跑');
            this.setState({
                isBarking: false,
                isRunning: false
            })
            console.log('sdf' + this.state.isRunning + '  234');
        }
    
        render () {
            return (<div onClick={ this.touch.bind(this) }>DOG</div>)
        }
    }
    
    

    本地测试没问题。


  • 0

    class Dog extends Component {
    constructor () {
    super()
    /* TODO */
    this.state = {
    isRunning: false,
    isBarking: false
    }
    }

    bark () {
    /* TODO */
    this.setState({
    isRunning: true
    })
    }

    run () {
    /* TODO */
    this.setState({
    isBarking: true
    })
    }
    clickthedog() {
    const that = this;
    that.bark();
    that.run();
    setTimeout(()=>{
    that.setState({
    isRunning: false,
    isBarking: false
    })
    }, 50)
    }
    render () {
    return (<div onClick={this.clickthedog.bind(this)}>DOG</div>)
    }
    }


  • 0

    这样也可以通过?没有停下来啊

    class Dog extends Component {
    constructor () {
    super()
    this.state = {
    isRunning: false,
    isBarking: false,
    }
    }

    bark () {
      
    }
    
    run () {
    }
    
    move(){
     
        this.bark.bind(this);
        this.run.bind(this);
        
        this.setState({isRunning: true,isBarking: true})
      
        setTimeout( () => 
          this.setState({isRunning: false,isBarking: false})
        ,30)
     
      
      
    }
    
    render () {
      return (<div onClick={this.move.bind(this)}>DOG</div>)
    }
    

    }


  • 0

    class Dog extends Component {
    constructor () {
    super()
    /* TODO */
    this.state = {
    isRunning:false,
    isBarking:false
    }
    }

    bark () {
    /* TODO */
    this.setState({isBarking:true});
    this.run();
    }

    run () {
    /* TODO */
    this.setState({isRunning:true});

    setTimeout(() => {
        this.setState({isBarking:false,isRunning:false});
    },50)
    

    }

    render () {
    return (<div onClick={this.bark.bind(this)}>DOG</div>)
    }
    }


  • 0

    class Dog extends Component {
    constructor () {
    super()
    this.state = {
    isRunning: false,
    isBarking: false
    }
    }

    bark () {
    console.log('bark')
    }

    run () {
    console.log('run')
    }

    touch () {
    this.setState({
    isRunning: true,
    isBarking: true
    })
    this.bark();
    this.run();
    setTimeout( () => {
    this.setState({
    isRunning: false,
    isBarking: false
    })
    },20)
    }

    render () {
    return (<div onClick={this.touch.bind(this)}>DOG</div>)
    }
    }


  • 0

    class Dog extends Component {
    constructor () {
    super()
    /* TODO */
    this.state = { isRunning: false, isBarking: false}
    }

    bark () {
    /* TODO */
    this.setState({
    isRunning: true
    })
    console.log('barking!')
    }

    run () {
    /* TODO */
    this.setState({
    isBarking: true
    })
    console.log('running')
    }
    // quiet() {
    // this.setState({
    // isRunning: false,
    // isBarking: false
    // })
    // }
    handleClick() {
    const t = Math.random()*31+20
    this.bark()
    this.run()
    setTimeout(() => {
    this.setState({
    isRunning: false,
    isBarking: false
    })
    }, t)
    // setTimeout(this.quiet, t)
    }
    render () {
    return (<div onClick={this.handleClick.bind(this)}>DOG</div>)
    }
    }

    为什么程序会报错quiet不是function,望解答


  • 0

    • 在webstrome测试正常啊,为何报错呢
    class Dog extends Component {
        constructor () {
            super();
            this.state={isRunning:false,isBarking:false}
        }
        bark () {
            this.setState({isBarking:true},()=>{
                console.log(this.state.isBarking);
                setTimeout(()=>{
    
                    this.setState({isBarking:false})
                    console.log(this.state.isBarking);
                },4000)
            })
        }
        run () {
            this.setState({isRuning:true},function () {
                console.log(this.state.isRuning);
            });
    
        }
        render () {
            return (<div onClick={()=>{this.bark();this.run()}}> DOG</div>)
        }
    }
    

登录后回复
 

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