javascript - react 从函数返回的 onClick JSX

Question

我正在使用下面的数组映射方法遍历图像 URL 数组，并返回一些带有 img src 的 JSX。

理想情况下，我想将 click 绑定(bind)到每个图像，以便稍后我可以将这个(被点击的)img src 放入 Redux 中。

下面，给我一个错误:

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>    

但是，当我将 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: 博士；如何将点击绑定(bind)到我的渲染方法之外返回的 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 函数及其作为事件处理程序的用途等的更多信息。