Reactでこういうコードがありました。
<Chip
label={"ラベル"}
onClick={() => handleClick("ラベル")}
/>
それで、これが解せなかった。
onClick={() =>
結論、今の僕の認識では、ユーザーがブラウザでChip
をクリックすると、
() => handleClick("ラベル")
これで定義したhandleClick
が実行されるという認識において、
MDNのアロー関数に書いてある仕様とは違うのかな?と思いました。
アロー関数は学びました
【JavaScript】アロー関数式を学ぶついでにthisも復習する話
このqiitaで書かれれる、
3行でまとめ
・JavaScriptのES6でアロー関数式という、今までとは違った関数の書き方が追加された
・アロー関数式は既存の関数式より文字数が短くなるだけではなく、宣言時のthisを束縛して不変のものにするという効果を持っている
・ほとんどの場面ではアロー関数式を使うほうがわかりやすくなるが、thisを束縛されて困る場面もあるので要注意!
というところも納得しました。
これを読んだ後でも、所謂アロー関数式の説明では、 onClick={() => handleClick("ラベル")}
の動きはよく理解できなかった。
自分で試して、
var arguments = [1, 2, 3];
var arr = () => arguments[0];
// 1
console.log( arr() )
だとコンソールに1が出てくるけど、
var arguments = [1, 2, 3];
// () => arguments[0]
console.log( () => arguments[0] )
これだとコンソールに() => arguments[0]
が出てくるということを見ても、
ブラウザからのクリック動作がまさに、onClick={() => handleClick("ラベル")}
で言うところの、関数実行()
になるものと判断しました。
そして、これはこういうもので、アロー関数のイロハとは違うと認識しています。
間違ってたら詳しく教えてください٩( 'ω' )و