반응에서 div 태그의 KeyPress를 트리거 할 수 있습니까

Question

질문을 표시하는 구성 요소가 있습니다. 각 질문은 반응 요소입니다. Enter를 누르면 다음 질문으로 이동해야합니다. onKeyPress를 Div 요소에 연결했지만 이벤트가 가끔 캡처되고 때로는 캡처되지 않습니다.

<div className="-" onKeyPress={(e) => this.navigateToNext(e)}> 
    <div className="preview-head"> 
    //Other stuff here 
    </div>{/* preview-container*/} 
</div> 

navigateToNext(e) { 
    if (option.get('selected') === true && e.charCode === 13) { 
       this.goToNextQuestion(); 
    } 
} 

누구든지이 문제를 해결할 다른 방법을 알려 줄 수 있습니까?

Answer 1

키 업 이벤트에 대해 componentWillMount에 이벤트 리스너를 연결하고 Enter 키를 확인합니다. componentWillUnmount에서 이벤트 리스너를 제거하십시오.

문제가 포커스를 가지고있는 div 주위에 있다고 생각합니다. 포커스가 맞지 않으면 키 누름 이벤트가 해당 요소에서 실행되지 않으므로 아무 것도 발생하지 않습니다.