react-keydown을 사용하여 내부 구성 요소의 keydown 이벤트 잡기

Question

내 애플리케이션에 키보드 단축키를 추가하기 위해 react-keydown 라이브러리를 사용하고 있지만 내부 대화 상자 구성 요소에서 작동하지 않습니다. 대화 상자가 항상 표시되는 것은 아니지만 표시 될 때 키가 작동해야합니다. 나는 event_handlers.js._onKeyDown (이벤트) 방법으로 받고 있어요,하지만 누락 된 값 : 정의되지 않은 FN = FN 반면이 장식 된 기능을 포함해야합니다.

<Container> 
    <MyDialog> 
     <material-ui-dialog/> 
    </MyDialog> 
</Container> 

Container.js :

import keydown from 'react-keydown' 
class Container extends Component { 
    @keydown('enter') 
    someMethod1(){ 
     // working 
    } 
    render() { 
     return (
     <div> 
      <MyDialog/> 
     </div> 
    ) 
    } 
} 

MyDialog.js : 코멘트에있는 당신의 설명을 바탕으로

이

import keydown, {keydownScoped} from 'react-keydown' 
@keydown('enter') 
class MyDialog extends Component { 
    @keydownScoped('enter') 
    someMethod3(){ 
     // not working 
    } 
} 

Answer 1

, 문제가 나타납니다

내 구성 요소 등이 보인다 귀하의 Dialog 구성 요소가 마운트 된 후 포커스를 잃어 버리면 내부의 모든 키 바인딩이 키 입력을받지 못하게됩니다. 에스. 몇 가지 옵션이 있습니다.

1) Dialog 구성 요소의 상위 요소이며 포커스를 잃지 않는 구성 요소를 꾸미면 키 바인딩 범위가 확장됩니다. 극단적 인 경우 이것은 앱의 루트 구성 요소 일 수 있습니다. 그런 다음 원하는 Dialog 구성 요소 메서드를 keydownScoped으로 꾸미십시오. 해당 메소드 내에서 현재 대화 상자가 활성 대화 상자인지 확인하기 위해 소품을 검사하십시오.

2)이 https://github.com/glortho/react-keydown/issues/28 행을 따라 대화 상자 키 바인딩을 프로그래밍 방식으로 활성화하십시오.

희망 하시겠습니까?