#5 不能摸的狗(一)


  • 0

    @ScriptOJ
    class Dog extends Component {
    bark () {
    console.log('bark')
    }

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

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

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


  • 0


  • 0

    @JohnnRen return 单独一行,JS 会把 return 后面的空白解析为 undefined


  • 0

    <div onClick={() => { this.bark(); this.run()}}>狗</div>
    <div onClick={(function() {this.bark(); this.run()})()}>狗</div>
    为什么第一条语句用箭头函数就可以;第二句用自调函数就报错呢


  • 0

    @ScriptOJ 为什么必须用箭头函数才可以,我用普通函数自调就不行呢?
    <div onClick={(function() {this.bark(); this.run()})()}>狗</div>


  • 0

    @vuejs 这个我知道了,是this上下文的原因,普通函数里面的this已经不是实例了,外面的还是,现在不明白的就是这里如果就是写普通函数,,那this怎么放进去,,
    我现在的理解就是最关键的是:this的绑定,也就是实例的绑定;函数才可以正确调用。
    当调用一个函数的时候,随便写。当调用多个函数的时候就必须用箭头函数。


  • 0

    class Dog extends Component {
    bark () {
    console.log('bark');
    this.run();
    }

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

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


  • 0

    @mx this 指向可以不用bind 箭头函数好理解,第二种方式是不是?不是很理解


  • 0

    可以直接使用匿名函数

    class Dog extends Component {
      bark () {
        console.log('bark')
      }
      
      run () {
        console.log('run')
      }
      
      render () {
        return (<div onClick={() => {this.bark();this.run();}}>DOG</div>)
      }
    }
    
    

  • 0

    @乌龙茶_
    绑定onClick的是div元素,不是React组件,应该是可以不用绑定bind(this)的吧?


  • 0

    @vuejs

    class Dog extends Component {
      bark () {
        console.log('bark')
      }
      
      run () {
        console.log('run')
      }
      
      render () {
        return (
          <div onClick={
            function () {
              this.bark()
              this.run()
            }.bind(this)
          }>
            DOG
          </div>
        )
      }
    }
    ``

  • 0

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

    因为方法不含返回值...这个操作还是可以的吧


  • 0

    这个不是有两个行为吗?

    有两个行为的话,两个按钮来控制吧。

    class Dog extends Component {
        bark() {
            console.log('bark')
        }
    
        run() {
            console.log('run')
        }
    
        render() {
            return (
            <div>
                <div> Dog </div>
                <button onClick={this.bark}> bark </button>
                <button onClick={this.run}> run </button>
            </div>)
        }
    }
    

  • 0

    class Dog extends Component {
      bark () {
        console.log('bark')
        this.run()
      }
      
      run () {
        console.log('run')
      }
      
      render () {
        return (<div onClick={this.bark.bind(this)}>DOG</div>)
      }
    }
    
    

  • 0

    @sandilion run 可以放在bark函数里面,题目是说狗先叫了, 然后才跑


  • 0

    @vuejs this指向问题


  • 0

    @vuejs 箭头函数自动绑定this了


  • 0

    在读小书的时候,跑的例子测试是这样的

    <h1 onClick={this.handleClickOnTitle}>React 小书</h1>
    

    handleClickOnTitle 不带括号的情况下,渲染完成后不会 console,点击后会 输出
    handleClickOnTitle 带括号的情况下,渲染完成直接就输出了,并没有点击。

    这道题目我的理解是应该不带括号才对,如果带了括号,渲染完成就直接调用了 run 和 bark。那与题目不符,需要摸了狗才叫和跑,现在没摸,不应该叫和跑才对。


  • 0

    略麻烦的调法
    class Dog extends Component {
    bark (callback) {
    console.log('bark')
    callback && callback();
    }

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

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


  • 0

    @ScriptOJ

    class Dog extends Component {
      bark () {
        console.log('bark')
      }
      
      run () {
        console.log('run')
      }
      
      render () {
        return (<div onClick ={this.bark(),this.run()}>DOG</div>)
      }
    }
    

    感觉很奇怪,this.bark后面必须要加()才能调用


登录后回复
 

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