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

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 的块作用域有关？