React- window.history.popstateのコンポーネント状態を変更します。

Question

状態が変わると、曲IDをURLにプッシュするReactコンポーネントがあります。私の問題は、ユーザーがブラウザで「戻る」をクリックすると、SongAppコンポーネントの状態を変更する必要があることです。これはどうすればいいですか？

class SongApp extends React.Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     song: props.songId 
    } 

    this.setSong = this.setSong.bind(this); 
    } 

    setSong(e) { 
    var songId = e.target.id; 
    this.setState({song: songId}) 
    window.history.pushState({song: songId}, '', '?s='+songId) 
    } 

    render() { 
    var id = this.state.song; 

    var content = id ? <SongDisplay lyrics={ this.props.songData[id].lyrics } /> : <SongIndex songData={this.props.songData} setSong={this.setSong}/> 
    return(
     <div className="song-app"> 
     {content} 
     </div> 
    ) 
    } 
} 

window.addEventListener('popstate', function(event) { 
    console.log('popstate fired!'); 
    debugger; 
    if(event.state.song) { 
    // change SongApp state 
    } 
}); 

Answer 1

私はあなたがリスナーにコンポーネントのメソッドを添付することができ判明：

componentDidMount() { 
    window.addEventListener("popstate", this.setSongFromHistory); 
    } 

    setSongFromHistory(e) { 
    if(e.state.song){ 
     e.preventDefault(); // stop request to server for new html 
     e.stopPropagation(); 
     this.setState({song: e.state.song}); 
     $('html,body').scrollTop(0); 
    } 
    }