[フロントエンド] React.jsで、onClick時に任意の値を渡す

こんにちは、@yoheiMuneです。
Reactでの開発は学ぶことが多く楽しいです。今日は、onClick時に任意の値を渡すための実装方法を、ブログに書きたいと思います。

目次

何がしたいのか

ReactでonClickを実装する際に、eventオブジェクトではなくて、任意の値を受け取りたい場合があります。

// onClickでは、例えば商品IDを受け取りたい.
onClick(productId) {
    console.log)(productId + 'を購入するよ！');
}

これを実現する方法について説明します。

onClickの関数に任意の値を渡す

任意の値を渡すためには、bind関数を使います。具体的には以下のように指定します。

<div
  onClick={this.onClick.bind(this, "渡したい値")}></div>

bindの第1引数にはonClick関数のthisになるものをバインドし、第2引数以降で渡したい値を指定します。ここでは1つだけ指定していますが、2つ以上指定したい場合には、第3,第4,...引数と指定できます。

受け取り側は、以下のように受け取ることができます。

onClick(productId) {
  console.log(productId + 'を買うよ！')
}

簡単に任意の値が指定できるので、便利ですねー。

任意の値とイベントオブジェクトの両方を受け取りたい

任意の値に加えて、通常のイベントオブジェクトも受け取ることができます。onClick関数の引数の最後にeを追加すると、イベントオブジェクトを取得することができます。

onClick(productId, e) {
  console.log(productId + 'を買うよ！')
  console.log('event:', e)
}

コードの全体像

今回のコードの全体像はこちらです。

class ProductList extends React.Component {

  constructor(props) {
    super(...arguments);
    this.state = {
      products : [
        { id : 1, name : 'お米' },
        { id : 2, name : 'お肉' },
        { id : 3, name : '野菜' }
      ]
    }
  }
  
  onClick(productId, e) {
    console.log(productId + 'を買うよ！')
    console.log('event:', e)
  }

  render() {        
    return (
      <div>
        { this.state.products.map(product => {
          return (
            <div
              onClick={this.onClick.bind(this, product.id)}
              key={ product.id }>
                { product.name }
            </div>
          )
        }) }
    </div>
    )
  }
}

ReactDOM.render(
  <ProductList/>,
  document.getElementById('container')
)

Fiddleで実際のコードを試すことができます。

最後に

bind関数を使いこなせるようになると、思い通りにJavaScriptが書けるようになり楽しいです。ぜひ使いこなせるようになってください！

最後になりますが本ブログでは、フロントエンド、Swift、PHP、Node.js、Python、Java、Linux、インフラ、Go言語、機械学習、などの技術トピックを発信をしていきます。「プログラミングで困ったその時の、解決の糸口に！」そんな目標でブログを書き続けています。ぜひ、本ブログのRSSやTwitterをフォローして貰えたら嬉しいです ^ ^

最後までご覧頂きましてありがとうございました！