Question

我正在使用下面的数组映射方法迭代一个图像网址数组，并返回一些带有img src的JSX。

理想情况下，我想将click绑定到每个图像，以便稍后我可以将这个（点击的）img src转换为redux。

下面给出了一个错误：“无法读取属性'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：博士;如何将click单击绑定到我在render方法之外返回的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。在严格模式下（在es模块的默认模式下）在函数调用中使用它时就是这种情况。

您可以做的是，在组件类的render方法中：

<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将引用父词汇上下文，在您的情况下是您的组件。

因为你想要的东西是清楚标识的：图像的src属性，你可以作为优化，不创建新的处理程序，而是创建一个通用的。

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作为@Nocebo说，你也可以使用这样的map函数：

<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函数接受第二个参数，Value在执行callback时使用.py

从函数

3 个答案: