#5 不能摸的狗(一)


  • 0

    为什么这里不用bind(this)


  • 1

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

  • 0

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


  • 2

    #第一种方法:

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

    #第二种方法:

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

  • 0

    @mx 第二种方法中为什么是this.bark()而不是this.bark呢?小书中的例子也也没有加()


  • 0

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

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

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

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


  • 0

    尴尬了…… 代码怎么没样式


  • 0

    这样子写是错的,系统却判别 是accept的.
    QA应该加个判断case:
    没有click的时候,没有执行run()和click
    class Dog extends Component {
    bark () {
    console.log('bark')
    }

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

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

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


  • 0

    @Freddy212121 handleClick (){
    //dosomething}

    和handleClick:function(){
    、、dosomething}

    是等同的吧 带function是ES5的写法
    ES6可以第一种简写,

    小白 不知道理解的对不对


  • 0

    class Dog extends Component {
    constructor(props){
    super(props);
    this.bark = this.bark.bind(this);
    this.run = this.run.bind(this);
    }
    bark () {
    console.log('bark')
    }

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

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

    }


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


登录后回复
 

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