react中点击事件带参数会立即执行2021-07-05

最新推荐文章于 2022-11-05 11:45:38 发布

北溟の魚

最新推荐文章于 2022-11-05 11:45:38 发布

阅读量374

点赞数 1

CC 4.0 BY-SA版权

分类专栏： React 框架

本文链接：https://blog.youkuaiyun.com/kongcheng_001/article/details/118491409

React 框架专栏收录该内容

10 篇文章

订阅专栏

本文介绍了在React中遇到点击事件参数提前执行的问题，分析了原因并提供了两种解决方案：使用箭头函数包裹事件调用或者直接在事件处理函数内部定义参数。这两种方法可以避免页面初始化时不必要的事件执行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react中点击事件带参数会立即执行2021-07-05

环境：本次使用版本为"react": “^17.0.2”

之前的版本也有同样的问题，点击事件存在该问题，其他事件同理；

问题代码如下，用该种方式写点击事件则页面初始化的时候就会执行该事件

import './App.css';

const App = () => {
  const btnAction=(a)=>{
    console.log(this,a);
  }
  return (
    <div className="App">
        <div onClick={btnAction('XXX')}>点击事件</div>
    </div>
  );
}

export default App;

为防止一刷新页面就执行该方法，则需要使用箭头函数方式书写

正确代码：
方法一：改变点击事件

//方法不变的情况下，改变事件用箭头函数调用
  const btnAction=(a)=>{
    console.log(a);//underfin XXX
  }
 
  <div onClick={(e)=>btnAction('XXX')}>点击事件</div>

方法二：改变方法

//方法不变的情况下，改变事件用箭头函数调用
  const btnAction=(a)=>(e)=>{
    console.log(a);//underfin XXX
  }
 
  <div onClick={btnAction('XXX')}>点击事件</div>

使用 function 方法同理

//事件不变的情况下，改变方法也是可以的
  function btnAction(a){
    console.log(a);//underfin XXX
  }
  return (
    <div className="App">
        <div onClick={()=>btnAction('XXX')}>点击事件</div>
    </div>
  );
}

export default App;