【React】onClickが呼び出されたときに任意の値の引数を渡す

React の書き方に未だに慣れていないところがあるので、まとめ。
今回は、onClick で呼び出した関数に、任意の引数を渡す方法です。

参考にさせていただいた記事はこちらから。

【React】イベントハンドラで引数を使いたい【備忘録】 – Qiita
https://qiita.com/tsuuuuu_san/items/73747c8b6e6e28f6bd23

 

上記の記事内でも書かれていますが、Reactの場合、下記のように書いても動きません。

sample(num) {
    // 行いたい処理
}

render() {
    return (
        <div>
            <button onClick={this.sample(100)}>ボタン</button>
        </div>
    );
}

記事によると、引数は渡せたものの、画面描画のたびに押していないはずのボタンの関数が実行されたとのことです。

で、解決策としては、下記のような書き方があるとのこと。
一つ目がこちら。

<button onClick={ () => this.sample(100) }>ボタン</button>

しかし、上記の方法だと、描画のたびに関数を作成することになるため、あまり良くない書き方だそうです。

二つ目がこちら。

<button onClick={ this.sample.bind(this, 100) }>ボタン</button>

何故動くのかは分かりませんが、とにかく動きました、とのこと。
引数が一つであればすっきりとしているので、個人的には好きな書き方ですね。
ですが、やはり何故動くかわからないものを使うのは少々怖いので、使用は見合わせかな。

三つ目がこちら。

sample(e) {
    console.log(e.currentTarget.getAttribute('data-num'));  // 100
}

render() {
    return (
        <div>
            <button onClick={this.sample} data-num="100">ボタン</button>
        </div>
    );
}

こちらでは、HTML5 から導入された、カスタムデータ属性を使用しています。
これは無理矢理感がなくて一番きれいかな、と思いますね。
ということで、今後は3番目のカスタムデータ属性を利用しようと思います。

 

以上、Reactで関数に引数を渡す方法でした。
と言うか、いい加減にReactの書き方に慣れたい…。頑張ります。

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

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

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

CTR IMG