爲什麼我不能將此函數傳遞給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？

回答

相關問題