#5 不能摸的狗(一)


  • 0

    @Freddy212121 答案没问题啊,加了括号才表示调用函数啊


  • 0

    你去看看阮一峰的教程,如果没有参数的话,是可以不写括号的。


  • 0
    administrators

    @Freddy212121 这里的问题不在于括号,而是没写 => 箭头,而且 statement 之间怎么能用 , 隔开。这两者都不是 JS 的合法语法。


  • 0

    @胡子大哈 onClick={() => { this.bark; this.run; }}所以这样是可以的吧


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


登录后回复
 

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