react中点击事件带参数会立即执行

用该种方式写点击事件则页面初始化的时候就会执行该事件

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;