React.js 事件绑定的方式

Question

<button onclick = { this.btn( data ) }>Btn</button>// 这样为什么会直接运行这个函数btn = ( data ) => { console.log( data ) }// 这样就会正常执行btn = ( data ) => () => { console.log( data ) }// 然而 当不传参数的时候<button onclick = { this.btn }>Btn</button>// 这样就是正常的btn = ( ) => { console.log( 111 ) }* 如果大佬们有时间的话可以帮我看一下这个么，https://mp.weixin.qq.com/s/rB...我是看了这个才知道这个绑定方法的，说我原来的绑定方法是错误的，但是我有点不明白这个绑定的函数为什么要这样写，我是个菜鸟，还希望有空的大佬能告诉我详细一点想问一下大佬：1: btn = ( data ) => () => { console.log( data ) } 这个是个什么函数？2: 可不可以帮我解释一下上边的 demo ！

Answer 1

一句话重点：事件绑定的 是函数，不是函数的执行。

// 事件绑定函数，正确btn = () => { console.log( 111 ) }
<button onclick = { this.btn }>Btn</button>// 事件绑定函数的执行，错误btn = () => { console.log( 111 ) }
<button onclick = { this.btn( data ) }>Btn</button>// btn函数执行也返回函数，事件绑定函数，正确btn = ( data ) => () => { console.log( data ) }
<button onclick = { this.btn( data ) }>Btn</button>