理解onClick={handleAdd}和onClick={() => handleDelete(user.id)}

文章索引

为什么 “添加用户” 和 “删除用户” 的点击处理逻辑不太一样？
其实，这是因为 两者绑定事件的方式不同，看代码理解一下：

🎨 事件处理方式对比

<button onClick={handleAdd}>添加用户</button>

1 2	<button onClick={handleAdd}>添加用户</button>

这里的 handleAdd 是直接传递函数引用。
点击按钮时，它会自动调用 handleAdd，因为 onClick 接收的是一个函数。

✅ 为什么可以这样？
因为 handleAdd 不需要参数，直接绑定就行了：

const handleAdd = () => { /* 新增逻辑 */ }

1 2	const handleAdd = () => { /* 新增逻辑 */ }

<button onClick={() => handleDelete(user.id)}>删除</button>

1 2	<button onClick={() => handleDelete(user.id)}>删除</button>

这里用的是一个 箭头函数 包裹 handleDelete 调用，因为需要传递 user.id。
如果你直接写：

<button onClick={handleDelete(user.id)}>删除</button>

1 2	<button onClick={handleDelete(user.id)}>删除</button>

会出问题！因为 handleDelete(user.id) 这个函数会 立刻执行，而不是等用户点击时再执行。
所以我们需要用一个 箭头函数包装，让 onClick 得到的是一个函数，而不是函数的返回值。

✅ 为什么需要参数？
因为删除需要知道具体是哪个用户，所以必须传 id。

功能	事件绑定写法	是否需要参数	为什么这样写
添加用户	`onClick={handleAdd}`	❌ 不需要	直接调用 `handleAdd`，无参数
删除用户	`onClick={() => handleDelete(id)}`	✅ 需要	需要传递 `id`，所以用箭头函数包裹

比如传多个参数：

<button onClick={() => handleDelete(user.id, user.name)}>删除</button>

1 2	<button onClick={() => handleDelete(user.id, user.name)}>删除</button>

如果希望更优雅，还可以用 .bind，例如：

<button onClick={handleDelete.bind(null, user.id)}>删除</button>

1 2	<button onClick={handleDelete.bind(null, user.id)}>删除</button>

但箭头函数更常用、更直观。