反応onClick JSX関数から返された

Question

私は以下の配列マップメソッドを使用して画像URLの配列を反復処理し、img srcでJSXを返します。

理想的には、各画像にクリックしてバインドしたいので、この（クリックした）img srcを後で還元することができます。

以下、私にエラーを与える：「未定義のプロパティを読み取ることができません 『changeImg』」

<div className="gallery-thumbs"> 
     { galleryImages.map(function(img, index){ 
     return <img 
       key={ img } 
       className="thumb-product-img" src={ img } 
       onClick={ this.changeImg.bind(this) } />; 
     }) } 
    </div>  

しかし、私はそれは私にエラーを与えないレベルをonClickのを上に移動...唯一の問題は、この文脈が失われることです。

<div className="gallery-thumbs" onClick={ this.changeImg.bind(this) }> 
     { galleryImages.map(function(img, index){ 
     return <img 
       key={ img } 
       className="thumb-product-img" src={ img } />; 
     }) } 
    </div> 

tl：dr;私のレンダリングメソッドの外で返されたJSXへのクリックをバインドする方法はありますか？

Answer 1

あなたが変更した場合、それはおそらく動作します：

<div className="gallery-thumbs"> 
     { galleryImages.map((img, index) => { //arrow function 
     return <img 
       key={ img } 
       className="thumb-product-img" src={ img } 
       onClick={ this.changeImg.bind(this) } />; 
     }) } 
    </div> 

私はmapと配列を反復処理しているときにコンテキストを失うと仮定します。 functionからarrowへの簡単な変更はおそらくトリックを行います。

Hereについては、arrowの機能とイベントハンドラなどとしてのその使用についての詳細を読むことができます。

Answer 2

これは、語彙コンテキストthisがundefinedであることを意味します。 strictモード（これはesモジュールのデフォルトモード）で関数呼び出しの中で使用する場合です。

<div className="gallery-thumbs"> 
    { galleryImages.map((img, index) => { 
    return <img 
      key={ img } 
      className="thumb-product-img" src={ img } 
      onClick={ e => this.changeImg(e) } />; 
    }) } 
</div>  

矢印関数の構文は、その本体にthisを呼び出すことを意味し、語彙のコンテキストを持っていない新しい機能を作成します。あなたは何ができるか

は、コンポーネントクラスのrenderメソッド内であり、あなたのケースであなたのコンポーネントである親のレキシカルコンテキストを参照します。

イメージのsrc属性が明確に識別されているため、最適化として新しいハンドラを作成せず、汎用のものを作成することができます。

<div className="gallery-thumbs"> 
    { 
     galleryImages.map(function(img, index){ 
     return <img 
      key={ img } 
      className="thumb-product-img" src={ img } 
      onClick={ this.changeImg.bind(this) } />; 
     }, this) 
    } 
</div> 

map機能がcallbackを実行するときに、このように使用するValueになります二番目の引数を取る：@Noceboは、あなたも、このようなマップ機能を使用することができます言ったよう

const handle = e => this.changeImg(e.currentTarget.src); 
<div className="gallery-thumbs"> 
    { galleryImages.map((img, index) => { 
    return <img 
      key={ img } 
      className="thumb-product-img" src={ img } 
      onClick={ handle } />; 
    }) } 
</div>  

Answer 3

あなたはarrow functionを使用することができます