2018/04/24更新

[フロントエンド] 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言語、機械学習、などの技術トピックを発信をしていきます。「プログラミングで困ったその時の、解決の糸口に!」そんな目標でブログを書き続けています。ぜひ、本ブログのRSSTwitterをフォローして貰えたら嬉しいです ^ ^

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





こんな記事もいかがですか?

[取り組み] フロントエンドでコーディングスピードをアップさせる6つの方法!と思って書いてたら30個も書いちゃった。
[フロントエンド] フロントエンドの入社試験99問!難しいですよ〜w。
[フロントエンド] Webページを表示するテストの際に、通信速度を3Gに制限して表示してみよう
[フロントエンド] スマホ実機でのデバッグ手段を増やす!Macのプロキシを利用して、通信内容を確認する。
[フロントエンド] Chrome 35 Beta の変更点。Touch制御、新しいJavaScript機能、プレフィックスなしのShadowDOM
[フロントエンド]複数アカウントでのテストには、Chromeのユーザー管理を使って、Cookieを切り替えると便利
[フロントエンド] Chrome36βが出た。変更点など。element.animate、HTML Imports、Object.observe、他。
RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。