React， ES6 语法出现的一个疑惑

[NicholasNC]

import React, {Component} from 'react';

export default class AddBtn extends Component {
    render() {
        return (
            <button onClick={function() {
                this.handleClick();
            }}>
                Add
            </button>
        )
  }

  handleClick() {
    this.props.onAddClick();
  }
}

import React, {Component} from 'react';

export default class AddBtn extends Component {
    render() {
        return (
            <button onClick={() => this.handleClick()}>
                Add
            </button>
        )
  }

  handleClick() {
    this.props.onAddClick();
  }
}

说明，上述两段代码中this.props.onAddClick();是从父组件中传递进来的，工能只是控制台输出一个f。

第一段代码中，用了ES5 的语法，但是报错，如下图：

第二段代码中，用了ES6 的箭头语法，运行正确，如下图：

问题来了
这两个写法是不是一样的吗？（就算我在第一种写法中加行一个return this.handleClick();结果还是报错）

我猜
会不会是和 ES6 的块作用域有关？

[FrankFang128]

去年都有人写文章科普了。两个写法的 this 是不一样的。

[hvsy]

箭头语法会自动绑定 this 指针的，随意箭头语法更普通的 function 是不一样的

[Twinkle]

ES6 写法的话， React component 非自带的函数 this 并不指向自身，需要用 bind(this) 来绑定
onClick={this.handleClick.bind(this)}

[NicholasNC]

一言惊醒梦中人。用古老的这种写法也可以。
render() {
let self = this;
return (
<button onClick={function() {
return self.handleClick();
}}>
Add
</button>
)
}

不过还有一点不是很能理解，
() => this.handleClick();转换成 ES5 就是上述代码，但是那个 return 凑什么热闹，一个事件处理函数返回一个执行结果好像没什么意义（虽然这样写也没错）

[kiscall]

第一种写法的 this 指向 button ，而 button 没有 handleClick 方法，所以怎么写都报错。 es6 的那个写法 this 指向 component ，就能访问到 handleClick 方法。 NicholasNC 的方法拿到了全局指针，所以又能访问到 handleClick 方法了。

[EPr2hh6LADQWqRVH]

我了个去。。。

真受不了代码里面混写标签。。。

[bdbai]

请善用调试器。在执行代码那一行下个断点，观察右边显示的 this 你就明白了。

[sox]

既然你知道是 arrow function 为什么不知道为什么。。

[zhangxiao]

@avastms jsx 还行，不像 php 那种混法。

[hvsy]

@NicholasNC 箭头函数是为了方便快捷的简写，所以它当这个函数只有一条语句的时候就会将这条一句作为返回值，这样可以很方便的兼容各种情况

[NicholasNC]

@sox 其实我对 ES6 也是一知半解，之前粗略看过阮一峰的教程 http://es6.ruanyifeng.com ，虽然有看过箭头函数自动绑定 this ，不过真正用起来还是被 ES5 的想法套住了，编程遇坑才对一些知识点更深刻。 O(∩_∩)O 哈！

@hvsy 那其实 return self.handleClick(); 和 self.handleClick();在这里也就没什么区别？