【React】コンポーネントに引数有の関数を渡す方法

初歩的ながらハマったので自戒の念を込めてメモ。

イベントハンドラに引数有の関数を渡す方法

イベントハンドラに引数有の関数を渡したい場合、2通りの書き方があります。

ひとつはアロー関数を使う方法。
もうひとつはbindメソッドを使う方法です。

アロー関数

<Component onClick={() => this.handleClick(i)}>

bindメソッド

<Component onClick={this.handleClick.bind(this,id)}>

ここでポイントは上のどちらも関数を渡しているいうことです。

アロー関数は無名関数を定義する記法、bindメソッドはthisを変更した新たな関数を生成するメソッドであるため、onClickに渡されるのはどちらも関数そのものです。

何にハマったか？

引数無しの関数をイベントハンドラに登録する時は以下のように書くので

<Component onClick={this.handleClick}>

同じように引数有の関数を登録しようとすると想定外の挙動になりました。

<Component onClick={this.handleClick(i)}>

上の例は関数の登録ではなく、関数の実行として扱われます。
onClickイベントの発火を待たず、コンポーネントがレンダリングされた時点でメソッドが動くことになるため、まだクリックしてないのに勝手に動いている…といった状況になりました。

まとめ

イベントハンドラには関数を渡すこと。
アロー関数やbindを使用すること。

なんとなくで書かず、自分が何をしているのか理解した上でコードを書かなければいけませんね…