#5 不能摸的狗(一)


  • 0
    administrators

    @Freddy212121 不可以。无参数函数声明不需要括号,但是函数调用是一定要括号的。需要分清两者的区别。


  • -2

    @胡子大哈 !
    0_1496976449105_upload-40e02710-1e59-4cb4-865b-3d771eec516e
    为什么这里的handleClick调用没有括号啊


  • 2
    administrators

    @Freddy212121 这里哪里调用了..这里的 handleClick 并没调用,渲染的时候不会调用函数。这是把函数传进去,用户点击的时候才会被系统调用。


  • 1

    @胡子大哈 知道了,谢谢


  • 3

    个人感觉,胡子大大表述的很清楚了,要不要括号看函数申明还是函数调用,当有了箭头 => 时是函数调用,需要加括号,不加箭头就是函数申明了,本例中两种写法都可以,如下:

    函数申明,传参

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

    函数调用

    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

    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

    class Dog extends Component {
    Touch() {
    console.log('Touch puppy');
    }
    Bark() {
    console.log('Bark');
    }
    Run() {
    console.log('The dog has been run away');
    }
    render() {
    return (
    <div onClick={() => {this.Touch();this.Bark();this.Run()}}>
    puppy
    </div>
    )
    }
    }
    ReactDom.render(

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

    )


  • 0

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

    这样怎么也行哦。


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

登录后回复
 

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