• react:handleEdit={() => handleEdit(user)} 和 handleEdit={handleEdit(user)}有啥区别


    `handleEdit={() => handleEdit(user)}` 和 `handleEdit={handleEdit(user)}` 之间的区别在于它们在调用函数时的行为方式不同,尤其是处理函数参数和立即调用方面:

    ### 1. `handleEdit={() => handleEdit(user)}`

    - **行为**: 这是一个箭头函数,在组件渲染时不会立即调用 `handleEdit` 函数,而是在按钮被点击时才调用。
    - **用途**: 用于需要传递参数给事件处理函数的情况,但不希望在渲染时立即执行。
    - **示例**:

    ```jsx

    ```

    - **优点**: 只有在点击按钮时才会调用 `handleEdit` 函数,并且传递当前的 `user` 对象作为参数。

    ### 2. `handleEdit={handleEdit(user)}`

    - **行为**: 这是直接调用 `handleEdit` 函数,并将其返回值作为 `handleEdit` 属性的值。这意味着 `handleEdit` 函数会在组件渲染时立即执行。
    - **用途**: 一般情况下不常用,除非你需要在组件渲染时立即执行函数并且将返回值作为回调函数。
    - **示例**:

    ```jsx

    ```

    - **缺点**: 会在渲染时立即调用 `handleEdit` 函数,这通常不是期望的行为,因为事件处理函数应该在事件发生时才执行。

    ### 示例分析

    假设你有以下 `handleEdit` 函数:

    ```jsx
    const handleEdit = (user) => {
      console.log(user);
      dispatch({
        type: 'employeeInfo/saveValue',
        payload: {
          modalType: "update",
          currentItem: user,
        },
      });
    };
    ```

    - **`handleEdit={() => handleEdit(user)}`**:

      ```jsx
     
      ```

      - 渲染时不会调用 `handleEdit`。
      - 只有在点击按钮时才会执行 `handleEdit(user)`。

    - **`handleEdit={handleEdit(user)}`**:

      ```jsx
     
      ```

      - 在渲染时立即调用 `handleEdit(user)` 并执行其内部逻辑。
      - 将 `handleEdit` 的返回值(通常是 `undefined`)作为 `onClick` 处理函数,这意味着按钮点击时不会再执行 `handleEdit` 函数。

    ### 结论

    对于你的情况,你需要在按钮点击时才调用 `handleEdit` 并传递 `user` 对象作为参数,因此应该使用箭头函数:

    ```jsx

    ```

    这样可以确保 `handleEdit` 函数在点击事件发生时执行,而不是在组件渲染时立即执行。

  • 相关阅读:
    雷达基础系列文章之五:雷达调制样式的功能
    MySQL牛客题组练习
    LeetCode简单题之计算应缴税款总额
    第3章 数组及字符串操作
    Web前端:JavaScript在网络游戏中的使用
    【Redis】10道不得不会的Redis面试题
    Linux ❀ 磁盘IO较大故障告警排查确认方法
    Session的基本使用 [JavaWeb][Servlet]
    1.4.C++项目:仿muduo库实现并发服务器之buffer模块的设计
    【slam十四讲第二版】【课本例题代码向】【第二讲初识SLAM】【SLAM基础知识】【linux下C++编译】【cmake基础使用】
  • 原文地址:https://blog.csdn.net/sofeware333/article/details/139633968