为什么我不能将此函数传递给React中的onMouseEnter？

我认为答案与'this'的背景有关。尝试通过传递handleEnter（）函数呈现createTrack时，出现'无法读取未定义的道具'的错误。然而，我可以传递一个没有'this'的常规函数，比如song.play（）;为什么我不能将此函数传递给React中的onMouseEnter？

有人可以提供更好的解释吗？

handleEnter(){ 
    this.song.play(); 
     // this.props.mouseEnter(); 
} 
createTrack(track){ 
    var song = new Audio([track.preview_url]); 


    return ( 
       <div className="image" key={track.id}> 
        <img className="img-circle" src={track.album.images[0].url} onMouseEnter={this.handleEnter.bind(this)} onMouseLeave={()=>song.pause()}/> 
        <p className="showMe"><span>{track.name}</span></p> 
        <p className="showMeArtist"><span>{track.artists[0].name}</span></p> 

       </div> 
       ); 
} 
getTracks(){ 
if(this.props.tracks){ 
    console.log(this.props.tracks); 
return <div>{this.props.tracks.map(this.createTrack)}</div> 
    } 
} 
render(){ 
    return(
        <div>{this.getTracks()}</div> 
    ) 
}

来源

2016-08-21 driftdrift

我认为这是问题所在。添加绑定到map的函数参数。就像这样：

return <div>{this.props.tracks.map(this.createTrack, this)}</div>

编辑：我已经改变了我的回答一点。当map调用createTrack时，除非给它一个thisArg参数，否则它是未定义的。如果没有thisArg地图不具有的功能是写在范围下面是MDN的解释 -

如果提供了thisArg参数映射，它会被传递给回调调用时，对用作它的这个值。否则，未定义的值将被传递以用作其此值。通过回调最终可观察到的这个值是根据通常的规则确定的，用于确定由函数所看到的这个。

来源

2016-08-22 00:01:08 qballer

您可能想详细说明为什么会出现这种问题。 –

让我知道这是否有意义。 – qballer

这是es6的等价物吗？如果我使用箭头功能？ {this.props.tracks.map（track => this.createTrack（track））} – driftdrift

歌曲是当地的createTrack（）。我建议你把歌放在状态并通过this.state.song访问它。

来源

2016-08-22 00:01:35

如果有很多歌曲，这是如何工作的？ – driftdrift

您可以拥有一个包含歌曲数组和状态的歌曲（播放） –

我无法在映射功能中设置状态，或者组件进入无限重新渲染循环 – driftdrift

为什么我不能将此函数传递给React中的onMouseEnter？

回答

相关问题