【react】onClick内の関数に引数を付けるのに少しコツがほしかった

タイトルの通りですが、いつも使っているためかonClickに正しく引数を付ける方法を全く知らずにここまで来てしまいました。

今回は普通にこんな感じで

 


<span class="p"><</span><span class="nt">button</span> <span class="na">onClick=</span><span class="si">{</span><span class="k">this</span><span class="p">.buttonClick</span><span class="p">(</span><span class="mi">member.count</span><span class="p">)</span><span class="si">}</span><span class="p">></span><span class="p">

 

この書き方だとonClickの機能を果たさずにrenderした瞬間に処理をして後にクリックしても無反応になってしまいます。

とりあえず公式に沿ってbindをした後に引数をつけてあげると期待した動きをしてくれるようになりました。

こんな感じ↓


onClick={this.buttonClick.bind(this, member.count)}>

 

あんまり変わっていないですね・・・。でもこれさえできれば動的に値を操作できるので応用が利きやすいのも強みですね、

onClickで引数とりたいなと思っている方には一番おすすめの方法です。

 

ちなみに公式ページがこれ(^.^)/~~~

https://reactjs.org/docs/handling-events.html#passing-arguments-to-event-handlers

 

>株式会社シーポイントラボ

株式会社シーポイントラボ

TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:〒432-8003
   静岡県浜松市中央区和地山3-1-7
   浜松イノベーションキューブ 315
※ご来社の際はインターホンで「316」をお呼びください

CTR IMG