浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【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

 

  • この記事いいね! (0)