Help us understand the problem. What is going on with this article?

ReactでonClick={() =>がわからない

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("ラベル")}で言うところの、関数実行()になるものと判断しました。

そして、これはこういうもので、アロー関数のイロハとは違うと認識しています。

間違ってたら詳しく教えてください٩( 'ω' )و

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away