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

asaba 著者:asaba

【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)

著者について

asaba

asaba author

好きなもの:RPG、チョコミント 少しずつ頑張ります。