onClick中的函数自动被调用问题

问题描述

• 当使用<button onClick={this.onClickButton}>Click Me</button>时工作正常；
• 而使用<button onClick={this.onClickButton(param)}>Click Me</button>时，每次函数都会自动被调用。

首先摘抄某博客中的内容：

One way of accessing the properties of an object is via the dot operator (.). This operator has two different modes:

• Getting and setting properties: obj.prop
• Calling methods: obj.prop(x, y)
  The latter is equivalent to:
  obj.prop.call(obj, x, y)

所以<button onClick={this.onClickButton}>Click Me</button>可以直接把this.onClickButton写在括号内，因为这样用的是第一种方法，实际上是将onClickButton作为一个属性传给onClick，调用onClick后才执行该函数，也就相当于：

const onClick = this.onClickButton
onClick();

这时onClick中会有一个隐含的this参数，使函数内部不能通过this读取到外层组件，因此需要在外部组件的constructor中添加this.onClickButton = this.onClickButton.bind(this)，将外部组件的this传入函数内部。

相反，<button onClick={this.onClickButton(param)}>Click Me</button>中使用的是上述第二种带括号的，实际加载时，先调用onClickButton(param)函数，然后将其返回值赋给onClick。因此每次加载时组件会自动调用onClickButton函数，而在constructor中也不用将this绑定给onClickButton。

解决方法

使用匿名函数，<button onClick={()=>this.onClickButton(param)}>Click Me</button>，直接将该匿名函数作为一个整体赋值给onClick，当onClick被调用时，该匿名函数才被执行。又由于箭头函数不会将函数内部的this覆盖（原理可读上述博客），因此在函数内部仍然可以读取到外部组件的this，从而在这种情况下也不需要在constructor中把this绑定给onClickButton。