경로 변경 후 이벤트 수신 대기 중지

Question

구성 요소 중 하나에서 특정 동작을 트리거하는 일부 키와 함께 키보드 이벤트를 수신합니다.

그러나 경로가 변경되고 사용자가 다른 구성 요소로 이동하면 더 이상 키보드 이벤트에 반응하고 싶지 않습니다. 내 이벤트 리스너를 상위 구성 요소로 이동시키고 현재 활성 경로를 기반으로 이벤트를 조건부로 반출하거나 무시하는 유일한 방법은 무엇입니까? 여기

내 최상위 구성 요소입니다 : 뷰어 구성 요소에서 발견

class AppRouter extends Router { 
    render() { 
    return (
     <Router> 
     <div> 
      <ul> 
      <li><Link to="/">Explorer</Link></li> 
      <li><Link to="/charts">Charts</Link></li> 
      </ul> 

      <hr/> 

      <Route exact path="/" component={Viewer}/> 
      <Route path="/charts" component={Charts}/> 
     </div> 
     </Router> 
    ); 
    } 
} 

class App extends Component { 
    render() { 
    return (
     <div className="App"> 
     <AppRouter /> 
     </div> 
    ); 
    } 
} 

그리고 내 이벤트 리스너,하지만 난 활성 다른 곳 싶지 않은 :

handleKeyDown(e) { 
    if (e.which === 37) 
     return this.fetchSibling('next'); 
    if (e.which === 39) 
     return this.fetchSibling('previous'); 
    } 

    componentWillMount() { 
    document.addEventListener('keydown', this.handleKeyDown.bind(this)); 
    } 

Answer 1

를 내가 찾은 솔루션 구성 요소를 마운트 해제하기 전에 이벤트 수신기를 제거해야합니다. 그러나이를 수행하려면 이벤트 처리기에 대한 참조를 유지해야하며 this을 올바르게 바인딩해야합니다. 다음은 내가 사용한 코드입니다 :

componentWillMount() { 
    this.setState({listener: this.handleKeyDown.bind(this)},() => document.addEventListener('keydown', this.state.listener)); 
    } 

    componentWillUnmount() { 
    document.removeEventListener('keydown', this.state.listener); 
    this.setState({listener: null}); 
    }