【React】イベントハンドラで引数を使いたい【備忘録】

普通に引数は渡せない

こんなことしてました

render() {
  return (
    <div>
      <button onClick={this.click(1)}>One</div>
    </div>
  );
}

click(value) {
}

これでは
関数を実行している
記述になってしまう。

あくまでやりたいのは、 引数付きの関数の登録！

正しくはこう

render() {
  return (
    <div>
      <button onClick={this.click}>One</div>
    </div>
  );
}

click() {
}

引数使いたい

できます！
公式に書いてありました（完全にスルーした私
Passing Arguments to Event Handlers

方法1：引数なしの関数でreturnしたらいいじゃない

<button onClick={ () => this.click(1) }>One</div>

超納得。
関数定義の中で引数付きの関数を実行すると言う記述です。

アロー関数はthisを束縛しません(一つ上のthisを探す)
そのため、constructorでthisを束縛(bind)しなくても動きます。

ただ、これだと(再)描画のたびに関数を作成することになるため、
Bestとは呼べない模様。
参考：https://code.i-harness.com/ja/q/1c6e0e2

方法2：bind関数使う

<button onClick={ this.click.bind(this, 1) }>One</div>

でもbind書きたくないですね。

方法2-2

そもそもonClickに登録する関数をアロー関数で定義すればいいじゃない。

clickButton = () => {
  this.click(1);
};

render() {
  return (
    ...
    <button onClick={this.clickButton}>One</div>
    ...
  );
}

方法3:HTML5のカスタム属性を利用する

render() {
  return (
    <div>
      <button onClick={this.click} data-num="1">One</button>
    </div>
  );
}

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

HTML5から「data-*」でカスタム属性がつけられるそうです(知りませんでした
これを利用して、属性経由で渡しちゃおうって作戦。