react es6绑定this箭头函数和bind 有何异同？？？？

Question

react es6绑定this箭头函数和bind 有何异同？？？？

<Button onClick={this.props.deleteTask.bind(this,this.props.groupKey)} size="small" type="primary" shape="circle" icon="cross" />

<Button onClick={(this.props.groupKey) => this.props.deleteTask(this.props.groupKey)} size="small" type="primary" shape="circle" icon="cross" />

这两段代码，上边的绑定是可以的，下面的就会报错。。。

Answer 1

在大括号中，要声明一个箭头函数，不是立即执行函数。所以传入的是形参，不是实参，'this.props.groupKey'不是一个有效的变量名所以报错了。而箭头函数中的this，指向的是最近一层作用域，所以箭头函数的函数体可以直接使用this，而无需传入任何参数。

<Button onClick={() => { this.props.deleteTask(this.props.groupKey) }} size="small" type="primary" shape="circle" icon="cross" />

Answer 2

<Button onClick={() => this.props.deleteTask(this.props.groupKey)} size="small" type="primary" shape="circle" icon="cross" />