react:handleEdit={() =＞ handleEdit(user)} 和 handleEdit={handleEdit(user)}有啥区别
`handleEdit={() => handleEdit(user)}` 和 `handleEdit={handleEdit(user)}` 之间的区别在于它们在调用函数时的行为方式不同，尤其是处理函数参数和立即调用方面：
### 1. `handleEdit={() => handleEdit(user)}`
- **行为**: 这是一个箭头函数，在组件渲染时不会立即调用 `handleEdit` 函数，而是在按钮被点击时才调用。
- **用途**: 用于需要传递参数给事件处理函数的情况，但不希望在渲染时立即执行。
- **示例**:
```jsx
<button onClick={() => handleEdit(user)}>编辑</button>
```
- **优点**: 只有在点击按钮时才会调用 `handleEdit` 函数，并且传递当前的 `user` 对象作为参数。
### 2. `handleEdit={handleEdit(user)}`
- **行为**: 这是直接调用 `handleEdit` 函数，并将其返回值作为 `handleEdit` 属性的值。这意味着 `handleEdit` 函数会在组件渲染时立即执行。
- **用途**: 一般情况下不常用，除非你需要在组件渲染时立即执行函数并且将返回值作为回调函数。
- **示例**:
```jsx
<button onClick={handleEdit(user)}>编辑</button>
```
- **缺点**: 会在渲染时立即调用 `handleEdit` 函数，这通常不是期望的行为，因为事件处理函数应该在事件发生时才执行。
### 示例分析
假设你有以下 `handleEdit` 函数：
```jsx
const handleEdit = (user) => {
console.log(user);
dispatch({
type: 'employeeInfo/saveValue',
payload: {
modalType: "update",
currentItem: user,
},
});
};
```
- **`handleEdit={() => handleEdit(user)}`**:
```jsx
<button onClick={() => handleEdit(user)}>编辑</button>
```
- 渲染时不会调用 `handleEdit`。
- 只有在点击按钮时才会执行 `handleEdit(user)`。
- **`handleEdit={handleEdit(user)}`**:
```jsx
<button onClick={handleEdit(user)}>编辑</button>
```
- 在渲染时立即调用 `handleEdit(user)` 并执行其内部逻辑。
- 将 `handleEdit` 的返回值（通常是 `undefined`）作为 `onClick` 处理函数，这意味着按钮点击时不会再执行 `handleEdit` 函数。
### 结论
对于你的情况，你需要在按钮点击时才调用 `handleEdit` 并传递 `user` 对象作为参数，因此应该使用箭头函数：
```jsx
<button onClick={() => handleEdit(user)}>编辑</button>
```
这样可以确保 `handleEdit` 函数在点击事件发生时执行，而不是在组件渲染时立即执行。