More than 1 year has passed since last update.

ReactでonClickを引数付きで呼び出したいけど動かない場合

Posted at 2022-12-18

onClickを引数つけて呼び出したけど動かない

私は最初以下のようにして呼び出してました。

const check=(name)=>{
   console.log(name)
}
return(
    <p className="name" onClick={check("たけし")}>たけし</p>
)

しかしこれではconsole.logが読み込み時に動いてしまい、onClickが適応されているたけしを押しても何も反応せず、コンソールも何も表示されません

次のように書くことで解決しました。

const check=(name)=>()=>{
   console.log(name)
}
return(
    <p className="name" onClick={check("たけし")}>たけし</p>
)

１行目のcheck「=(id)=>」が「=(id)=>()=>」に変わっていますね
これでたけしをクリックすると「たけし」がコンソールに現れます！

正直なぜこれで動くのか詳しい原理は分かっていませんが、解決方法としてもし同じようなことで詰まっている方がいらっしゃったらこの記事が力になれば幸いです。