Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

普通に引数は渡せない

こんなことしてました
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-*」でカスタム属性がつけられるそうです(知りませんでした
これを利用して、属性経由で渡しちゃおうって作戦。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away