react点击事件onClick

攀仔博客 / 2024-10-23 / 原文

1、普通不传参点击事件

<div className="locktext" onClick={toLock}>待解锁</div>

2、传参数点击事件:使用箭头函数

{
<div className={`${style.header_tags} flex center-v`}>
{headerTags && headerTags.map((item,index)=>{
return(
<div key={index} className={`${style.tag_item}`} onClick={()=>handleTagActive(item)}> //传参数需要箭头函数调用方法
      {item.title}
</div>
)
})}
</div>
}
const handleTagActive=(item)=>{
if(item.title=='商家登录'){
util.goto(item.path)
}else{
openWindow(item.path)
}
}
3、点击事件后面直接跟方法:使用箭头函数

<button onClick={() => alert(message)}>
{children}
</button>