Edited at

【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-*」でカスタム属性がつけられるそうです(知りませんでした

これを利用して、属性経由で渡しちゃおうって作戦。