なぜこの関数をReactのonMouseEnterに渡すことができないのですか？

Question

私は答えが「this」の文脈に関係していると思います。 handleEnter（）関数を渡してcreateTrackをレンダリングしようとすると、 'undefinedの小道具を読むことができません'というエラーが表示されます。しかし、私はそれをsong.play（）のような 'this'のない通常の関数に渡すことができます。

もっと詳しい説明がありますか？

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

Answer 1

私はこれが問題だと思います。 mapのfunctionパラメータにbindを追加します。このように：

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

編集：私は私の答えビットを変更しました 。あなたがthisArgのパラメータを与えない限り、マップはcreateTrackを呼び出すとき、これは未定義です。 thisArgマップがないと機能が書き込まれた範囲を持っていません。ここMDNから説明される - 。thisArgパラメータがマッピングするために提供されている場合は呼び出されたとき、それがために、 コールバックに

渡されます。この値として使用します。それ以外の場合は、未定義の値 が渡され、この値として使用されます。コールバックによって最終的に観測可能なこの値 は、関数によって見られるこれを決定するための通常の の規則に従って決定されます。

Answer 2

曲はcreateTrack（）に対応しています。私はあなたが状態に歌を入れ、this.state.song経由でアクセスすることをお勧めします。