#5 不能摸的狗(一)


  • 2

    @Joerica 我的理解是,题目中的摸小狗这个click,我们没有实际的点击就要触发跑和叫,所以需要直接调用函数。小书例子中的代码写的是真实的点击才触发的场景。不知道我的表达清不清楚


  • 0

    @zzc

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

  • 0

    0_1515553906321_upload-e34670aa-0b98-4545-a917-d8b4143c6dbc
    0_1515553963180_upload-434a014e-2faf-46e3-b004-a3917c270c6b


  • 0

    ES6函数语法注意进行绑定,
    当然也可以使用箭头函数{(e) => this.handleClick(e)}

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

  • 0

    @code_man
    漏了一个花括号吧return (<div onClick={()=>{this.bark();this.run()}}>DOG</div>)


  • 1

    @ScriptOJ

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

    检测通过,但其实并不对,这种形式只是在DOM渲染的时候执行了brak和run函数而已,并不是通过用户点击触发而成的


  • 0

    做了挺久的
    最大的误区在于认为对象和函数一样也会建立作用域
    但事实上对象的方法是没法直接访问到其他方法或属性的,而是必须借由this来取得实例
    回调时由于this的指向不再是对象实例,因此需通过箭头函数/bind绑定回调函数的this

    总结一下几种不同的实现
    1.用bind实现this的绑定
    render () {
    return (
    <div
    onClick={function(){this.bark();this.run();}.bind(this)}
    >DOG</div>
    );
    }
    2.用箭头函数实现this的绑定
    render () {
    return (
    <div
    onClick={()=>{this.bark();this.run();}}
    >DOG</div>
    );
    }
    3.转储this
    render () {
    let that=this;
    return (
    <div
    onClick={function(){that.bark();that.run();}}
    >DOG</div>
    );
    }
    p.s.还碰到一个坑 return和小括号必须写在同一行,否则会解析不了,原因没仔细研究orz


  • 0

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

    这种方式不行么


  • 0

    先汪汪叫.....然后再跑咯,你们都是一边叫一边跑的吧...
    class Dog extends Component {
    bark = () => {
    console.log('bark')
    this.run()
    }

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

    render () {
    return (<div onClick={this.bark}>DOG</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>)
    }
    }
    react中的this并不是上下文的this,因此要调出上下文的话,必须绑定this, 如 this.alertSome.bind(this)


  • 0

    class Dog extends Component {
     bark () {
      console.log('bark')
     }
    
     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')
    }

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

登录后回复
 

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