활성화/구성 요소가/defocused 표시 집중 될 때 키 수신기를 사용하지

.
예. 아래로을 누르면 다음 GridArea (Element)를 선택하고 을 누르면 Escape이 해당하는 경우 "부모"를 선택해야합니다.

GridEditor에서 다양한 GridAreaElements 등의 속성을 편집 할 수 있습니다. 입력 필드 GridEditor, 특히 이러한 입력 필드와 상호 작용할 때, I 은 키 누름 수신기가 활성화되도록하고 싶지 않습니다. 편집중인 요소의 선택을 취소하십시오.

그래서 내가 원하는 무엇 그리드 구성 요소 (그리고 그 아이가)/활성화에 초점이 맞춰지면 키 리스너를 활성화하는 것입니다,하지만 GridEditor가/활성 초점을 맞추고, 즉 그리드가/비활성 흐려 해제을 .

이 작업을 수행하는 방법에 대한 제안 사항이 있습니까?

2017-12-20 5ton3

나는 그것을 알아 냈다. 그것은 최선의 해결책이 있는지 확실하지 않습니다.

먼저 DOM 요소의 이벤트에 이벤트 리스너가 실행되도록합니다. div, 첨부 된 요소에 포커스가 있어야합니다. 우리는 그것을 tabIndex를 제공하여 확인 요소가 포커스를 가질 수 있습니다 :

<div className="myDiv" tabIndex="0" ref="myDiv" >

을 또한 사업부에 ref을 추가함으로써, 우리는 componentDidMount에로 DOM 요소에 액세스하고를 keyDown 이벤트 리스너를 첨부 할 수 있습니다

this.refs.myDiv.addEventListener('keydown', this.props.handleKeyPress, false)

이 keypown 수신기는 첨부 된 DOM 요소가 포커스를 받으면 트리거됩니다.

2017-12-21 08:58:45 5ton3

답변