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

╰半橙微兮° 2022-10-12 15:56 10阅读 0赞

### 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;

发表评论取消回复

表情：

评论列表（有 0 条评论，10人围观）

还没有评论，来说两句吧...

相关阅读

相关 CocosCreator通过点击事件执行帧动画

键代码： @property(cc.Animation) c: cc.Animation = null; // anim: cc.Ani...

ゝ一世哀愁。/ 2024年04月18日 12:09/ 0 赞/ 72 阅读

相关 jquery点击事件(jquery触发点击事件onclick)

jquery实现远程http的get请求用哪个事件？jquery ![jquery点击事件][jquery] jquery实现远程http的get请求用哪个事件？jq

系统管理员/ 2023年09月26日 15:01/ 0 赞/ 192 阅读

相关 js点击事件(Js点击事件冲突怎么办)

JS点击onclick事件这个是闭包的问题 for (var i = 12; i <= 16; i++) \{ (function(i)\{ 第12个点击事

末蓝、/ 2023年09月26日 14:47/ 0 赞/ 186 阅读

相关立即执行函数知识点

立即执行函数题：利用for循环，每间隔1秒打印出对应的秒数错误示范 for(var i = 0; i< len; i++){

小咪咪/ 2022年12月19日 09:20/ 0 赞/ 153 阅读

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

react中点击事件带参数会立即执行2021-07-05 环境：本次使用版本为"react": “^17.0.2” 之前的版本也有同样的问题，点击事件存在该问题，其

╰半橙微兮°/ 2022年10月12日 15:56/ 0 赞/ 11 阅读

相关 form 中点击button事件

form 中点击button事件之前项目中遇到需要ajax提交，所以form标签中增加button按钮点击触发ajax，但是在form中的button点击有可能会提交表

- 日理万妓/ 2022年06月12日 01:29/ 0 赞/ 326 阅读

相关点击事件

javascript教程 function displayDate()\{ document.getElementById("demo").inner

朴灿烈づ我的快乐病毒、/ 2022年06月08日 02:07/ 0 赞/ 349 阅读

相关 Vue点击事件

1.点击事件 <div v-on:click=openTab(item); class="message-item message-unread" v-for="

ゞ浴缸里的玫瑰/ 2022年05月19日 00:22/ 0 赞/ 354 阅读

相关 selenium点击事件

1、选择页面元素 By classElement = By.className("元素类样式名"); 或 By idElement = By.id("元素

墨蓝/ 2022年05月14日 05:22/ 0 赞/ 378 阅读

相关 React中通过点击事件添加样式

本文通过对元素的显示和消失为例在初始化阶段定义dispaly的属性值 constructor(props, context) { sup

冷不防/ 2021年12月23日 07:37/ 0 赞/ 921 阅读