ReactJS에서 div의 onKeyDown 이벤트를 처리하는 방법

Question

페이지 구성 요소를로드 할 때 키 이벤트를 처리하려고합니다. 홈 구성 요소에서

<Router> 
    <Route exact path="/" component={Home} /> 
</Router> 

, 내가 DIV 요소에 때 onKeyPress 결합하려고하지만 그것은 작동하지 것 : 첫째, 나는 라우터가 있습니다. 입력 요소에 바인딩합니다.

return (
     <div onKeyDown={this.__handleKeyDown} className="container" style={{ backgroundImage: `url(${this.state.backgroundbanner})` }}> 
      <input 
       className="hidden" 
       onKeyDown={this.__handleKeyDown} 
       ref={(input) => { this.dummyInput = input; }} 
       /> 
      <div className="container-shadow"> 
       <h1 className="main-title">{this.state.title}</h1> 
       <h3 className="main-description">{this.state.description}</h3> 
       <ListMovie cursor={ cursor } /> 
      </div> 
     </div> 
    ) 

어떻게 키 이벤트를 바인딩하는 div 요소 또는 방법에 onKeyDown에 이벤트를 바인딩 할 때 부하 경로의 페이지 구성 요소입니다. 왜냐하면 입력 요소에 초점이 맞지 않아이 키 이벤트를 실행할 수 없기 때문입니다.

감사합니다.

Answer 1

왜 작동하지 않는지에 대한 이유는 div 요소가 포커스가 가능하고 keyDown 이벤트를 처리하기 위해 tabIndex 속성을 필요로하기 때문입니다.

<div tabIndex="1" onKeyDown={this.__handleKeyDown}></div> 

Answer 2

접근 1 : 이벤트를 트리거 할 수

, 당신의 사업부는 선택해야합니다. 이렇게하려면 componentDidMount 이벤트에 초점을 맞춰야합니다. 이렇게하려면 div에 대한 참조가 필요합니다.

1 단계 : 문서 전체에 이벤트를 수신

: 부하에 초점

componentDidMount() { 
    this.div.focus(); 
} 

접근 방법 2 : DIV

<div onKeyDown={this.__handleKeyDown} ref={(c) => {this.div = c;}}> 

2 단계에 심판을받을

componentDidMount() { 
    document.addEventListener('keydown', this.onKeyDown); 
} 

componentWillUnmount() { 
    document.removeEventListener('keydown', this.onKeyDown); 
}