React.js中按钮点击事件为何在页面加载时自动触发？

嘿，我来帮你彻底搞懂这个问题！

首先咱们直接揪出代码里的核心问题：

<button onClick={this.handleRemoveAll()}>Remove All</button>

你在这里写的是this.handleRemoveAll()——注意后面的括号，这意味着你在组件渲染的当下就直接调用了这个函数，而不是把函数本身交给onClick事件处理器。

背后的React工作逻辑 #

React的事件属性（比如onClick、onChange）需要接收的是一个函数引用（也就是不加括号的函数名）。当对应的事件（比如用户点击按钮）发生时，React才会去调用这个函数。

而你现在的写法是：在组件执行render方法的时候，就立刻执行了this.handleRemoveAll()，把这个函数的返回值（这里alert没有返回值，所以是undefined）传给了onClick。这就导致页面一加载，render执行，函数就被调用，alert框直接弹出来了——和点击事件完全没关系。

怎么修复？ #

很简单，只需要传递函数本身，去掉后面的括号：

<button onClick={this.handleRemoveAll}>Remove All</button>

这样，onClick拿到的是handleRemoveAll这个函数的引用，只有当用户点击按钮时，React才会调用这个函数。

额外补充：需要传递参数怎么办？ #

如果你的函数需要接收参数（比如要删除特定选项），不能直接写this.handleRemove(option)（那样又会立刻执行），可以用箭头函数做一层包装：

<button onClick={() => this.handleRemove(option)}>删除{option}</button>

箭头函数在这里是一个“触发容器”，它会在点击时被调用，然后再执行你的目标函数并传递参数，这样就不会在渲染阶段提前触发了。

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