React
reac

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

More than 1 year has passed since last update.


普通に引数は渡せない


こんなことしてました

render() {

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

click(value) {
}


babelの解釈方法の話なのかわかりませんが、

私の場合、引数自体は渡せたのですが、

描画のたびに押していないボタンの関数が実行されました。


正しくはこう

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>

超納得。

constructorでthisの拘束をしなくても動いた(理解はしていない

ただ、これだと(再)描画のたびに関数を作成することになるため、

Bestとは呼べない模様。

参考:https://code.i-harness.com/ja/q/1c6e0e2


方法2:bind関数使う

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

これ何で動くのかわからない。

bindの戻り値ってコピーした関数なんだよね?

でも、動くらしい。


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

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

thisの拘束方法も、既存に沿えますね。


そもそも

そんな値はstateで管理して、

再描画が発生するなら、子コンポーネントにpropsで渡すー的な考え方にすべきなのかも。