ReactJS中带参数的onClick函数未点击即执行的问题求助

嘿，我太懂你遇到的这个坑了——刚接触React的时候，很多人都会踩这个事件绑定的小陷阱！咱们先来搞清楚问题出在哪，再给你几个靠谱的解决办法。

问题根源 #

当你写 <button onClick={this.apiGetProductPicture(this.props.categorie)}> 时，React在渲染组件的那一刻就会直接执行这个函数，因为你是主动调用了它（加了括号和参数），而不是把一个「待执行的函数引用」传给onClick事件。

至于你说不带参数时写 <button onClick={this.apiGetProductPicture()}> 能正常工作？其实严格来说这也不对——如果加了括号，页面加载时它也会自动执行，可能你实际写的是 <button onClick={this.apiGetProductPicture}>（不带括号），这时候传递的是函数本身的引用，只有点击时才会触发。

解决办法 #

下面给你三种常用的正确写法，按需选就行：

1. 箭头函数包裹（最直观的写法） #

用箭头函数创建一个匿名函数，只有点击时才会执行这个匿名函数，进而调用你的目标函数并传递参数：

<button onClick={() => this.apiGetProductPicture(this.props.categorie)}>{this.props.name}</button>

优点：写法简单直观，适合一次性使用的场景；缺点：每次渲染都会创建一个新函数，性能敏感的组件可能需要注意，但绝大多数场景下完全没问题。

2. 使用 bind 绑定参数和上下文 #

利用JavaScript的bind方法，预先绑定好this的上下文和需要传递的参数，返回一个新的函数给onClick：

<button onClick={this.apiGetProductPicture.bind(this, this.props.categorie)}>{this.props.name}</button>

优点：不会在每次渲染时创建新函数（如果bind是在构造函数里做的话更优）；缺点：写法稍微繁琐一点，而且要注意this的绑定问题。

3. 预先定义带参数的处理方法（适合复用场景） #

如果这个点击逻辑需要在多个地方使用，最好在组件类里提前定义一个处理方法：

// 组件类内部定义
handlePictureClick = () => {
  this.apiGetProductPicture(this.props.categorie);
}

// 渲染按钮时使用
<button onClick={this.handlePictureClick}>{this.props.name}</button>

优点：代码更清晰，复用性强，也不会重复创建函数；缺点：需要多写几行代码，适合逻辑复杂或需要多处调用的情况。

内容的提问来源于stack exchange，提问作者Sneatyx