#6 不能摸的狗(二)


  • 0

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

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

    run () {
    /* TODO */
    console.log('running');
    this.setState({isRunning: true});
    }
    handleClick(){
    this.bark();
    this.run();
    setTimeout(()=>{
    this.setState((prevState)=>{
    return {
    isBarking: !prevState.isBarking,
    isRunning: !prevState.isRunning
    }
    })
    },40);
    }

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


  • 0

    错误是"小狗跑起来的时候你并没有设置它 isRunning 状态为 true"
    可是明明setstate了啊

    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)
    }

    handleClick(){
    this.bark();
    this.run();
    }

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


  • 0

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

    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>)
    }
    }

    这个touch()里面的this其实不需要用that保存的,直接用this就可以


  • 0

    注意生成20~50的随机数

    class Dog extends Component {
      constructor () {
        super()
        this.state = { isRunning: false, isBarking: false }
      }
      
      bark () {
        console.log('dog is barking!');
        this.setState({
          isBarking: true
        })
      }
      
      run () {
        console.log('dog is running!');
        this.setState({
          isRunning: true
        })
      }
      
      stop () {
        let stopTime = Math.floor(Math.random()*(50-20)) + 20
        setTimeout(() => {
            this.setState(
                {
                    isBarking: false,
                    isRunning: false
                }
            )
        }, stopTime)
      }
     
      render () {
        return (<div onClick={ () => {this.bark.bind(this)();this.run.bind(this)();this.stop.bind(this)();} }>DOG</div>)
      }
    }
    

  • 0

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

  • 0

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

    stopBark() {
    this.setState(prevState => {
    console.log("still barking", prevState.isBarking);
    return { isBarking: false };
    });
    console.log("stop bark");
    }

    stopRun() {
    this.setState(prevState => {
    console.log("still running", prevState.isRunning);
    return { isRunning: false };
    });
    console.log("stop run");
    }

    bark() {
    this.setState(prevState => {
    console.log("ready barking", prevState.isBarking);
    return { isBarking: true };
    });
    console.log("bark");
    setTimeout(this.stopBark(), 20);
    }

    run() {
    this.setState(prevState => {
    console.log("ready running", prevState.isRunning);
    return { isRunning: true };
    });
    console.log("run");
    setTimeout(this.stopRun(), 20);
    }

    handleOnClick() {
    this.bark();
    this.run();
    }

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

    小狗跑起来的时候你并没有设置它 isRunning 状态为 true 这是啥原因呢,离线能都跑


  • 0

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

    问题出在哪儿,提示没有设置它 isBarking 状态为 true


  • 0

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

    getRandomArbitrary(min, max) {
    return Math.floor(Math.random() * (max - min)) + min;
    }
    bark () {
    console.log('bark')
    this.setState((prevState) => {
    return { isBarking: !prevState.isBarking }
    })
    }

    run () {
    console.log('run')
    this.setState((prevState) => {
    return { isRunning: !prevState.isRunning }
    })
    }

    all () {
    this.bark(); this.run();
    setTimeout(() => {
    this.setState((prevState) => {
    return { isRunning: !prevState.isRunning, isBarking: !prevState.isBarking }
    })
    }, this.getRandomArbitrary(2000, 5000))
    }

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


  • 0

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

    bark() {
        if (this.state.isBarking) {
            console.log('barking')
        }
    }
    
    run() {
        /* TODO */
        if (this.state.isRunning) {
            console.log('running')
        }
    }
    
    handleClick() {
        console.log(this.state)
        this.setState({
            isRunning: true,
            isBarking: true
        },
            () => {
                console.log(this.state)
                this.bark()
                this.run()
    
                if (this.timeOutHandle) {
                    clearTimeout(this.timeOutHandle)
                    this.timeOutHandle = null
                    // console.log(this.timeOutHandle)
                }
    
                this.timeOutHandle = setTimeout(() => {
                    this.setState({
                        isRunning: false,
                        isBarking: false
                    })
                }, Math.floor(Math.random() * (50 - 20)) + 20)
            })
    }
    
    render() {
        return (<div onClick={this.handleClick.bind(this)}>DOG</div>)
    }
    

    }


  • 0

    @ScriptOJ

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

    bark() {
        if (this.state.isBarking) {
            console.log('barking')
        }
    }
    
    run() {
        /* TODO */
        if (this.state.isRunning) {
            console.log('running')
        }
    }
    
    handleClick() {
        console.log(this.state)
        this.setState({
            isRunning: true,
            isBarking: true
        },
            () => {
                console.log(this.state)
                this.bark()
                this.run()
    
                if (this.timeOutHandle) {
                    clearTimeout(this.timeOutHandle)
                    this.timeOutHandle = null
                    // console.log(this.timeOutHandle)
                }
    
                this.timeOutHandle = setTimeout(() => {
                    this.setState({
                        isRunning: false,
                        isBarking: false
                    })
                }, Math.floor(Math.random() * (50 - 20)) + 20)
            })
    }
    
    render() {
        return (<div onClick={this.handleClick.bind(this)}>DOG</div>)
    }
    

    }


  • 0

    class Dog extends Component {
    constructor () {
    super()
    /* TODO */
    this.state={
    isRunning:false,
    isBarking:false
    }
    }
    doClick(){
    this.run();
    setTimeout(()=>{this.setState({
    isRunning:!this.state.isRunning,
    isBarking:!this.state.isBarking
    })},20)

    }

    bark () {
    /* TODO */
    }

    run () {
    /* TODO */
    this.bark();
    this.setState({
    isRunning:!this.state.isRunning,
    isBarking:!this.state.isBarking
    })
    }

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


  • 0

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

  • 0

    @ScriptOJ , 有两种调用方法

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

    这里不太理解bind,为什么第一种直接调用bark和run时不需要bind this,而第二种调用handleTouchDog的时候需要bind this

    谢谢


登录后回复
 

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