从函数返回的反应 onClick JSX

Question

I'm using the array map method below to iterate over an array of image URLs, and return some JSX with the img src.

Ideally, I'd like to bind click to each image so that I can get this (clicked) img src into Redux later.

The below, gives me an error:

Cannot read property 'changeImg' of undefined

<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>    

However, when I move the onClick up a level it doesn't give me the error... the only problem is, the context of this is lost.

<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; how can I bind click to JSX returned outside of my render method?

Answer 1

It will probably work if you change:

 <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>  

I assume you loose the context while iterating over the array with map . A simple change from function to arrow function will probably do the trick.

Here you can read more about arrow functions and their use as event handlers and more.

Answer 2

It means the lexical context this is undefined . It's the case when you use it inside a function call in strict mode ( which is the default mode for es modules).

what you could do is, inside the render method of your component class :

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

The arrow function syntax creates a new function which does not have a lexical context, which means that invoking this in its body will reference the parent lexical context, in your case your component.

Because what you want is clearly identified : the src attribute of the image, you could, as an optimization, not create a new handler but instead create a generic one.

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

you can use arrow function as @Nocebo said, you can also use map function like this :

<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 function take a second argument which will be the Value to use as this when executing callback