반응에서 키보드 단축키를 관리하는 방법

Question

키보드 단축키는 웹 응용 프로그램에서 관리하기가 약간 까다 롭습니다.

은 Widget 구성 요소를 고려하십시오.

키보드 쇼트를 기반으로 특정 구성 요소에 집중하고이 구성 요소에서 기능을 실행할 수 있기를 원합니다.

class Widget extends React.Component { 
    componentDidMount() { 
    this.setBindings() 
    }, 
    componentWillUnmount() { 
    this.removeBindings(); 
    } 
} 

setBindings 및 removeBindings는 특정 키보드 단축키

을 결합하는 mousetrap 같은 라이브러리를 사용하는 것이 이제, 위의 솔루션으로 두 가지 문제가있다

:

1. 그것은 바로 가기 동작을 예측할 수 한다을
   • 두 개의 위젯이 탑재 된 경우를 고려해보십시오. 다른 위젯을 덮어 쓰는 경우를 고려하십시오.
2. 위젯이 바로 가기와 밀접하게 결합됩니다. 누군가 바로 가기를 사용하지 않으려는 경우 Widget에 일종의 플래그가 있어야합니다. 이 파괴는 코드의 '단위'이다 - 이상적으로 사용자가이

또 다른 잠재적 인 솔루션처럼 위젯, 다음 WidgetWithShortcuts, 또는 무언가를 사용할 수 있어야, 인스턴스

const widgetShortcuts = (widgetInstance) => { 
    return { 
    'ctrl i':() => widgetInstance.focusInput(), 
    } 
} 

에게 전달하는 것입니다 두 번째 솔루션의 문제점은 다음과 같습니다

1. widgetInstance이 focusSomeThing, 또는 invokeProp 같은 공개적으로 액세스 할 수있는 방법을 많이 노출해야 할 것 등

2. Widget에 특정 툴팁이 표시되는 경우 키보드 쇼트 컷에 대한 정보가 다른 위치에 복제됩니다. 그것은 한 곳에서 바로 가기를 변경하고 다른 장소

가장 좋은 방법이 있는가, 또는 위의 문제에 대한 솔루션을 구현할 수있는 방법을 키보드 단축키에 대한 몇 가지 아이디어를 그렇게하는 것을 잊지 할 수있게 할 것인가?

Answer 1

나는 키보드 단축키 수신기를 최상위 레벨에 한 번 설치하고 단축키가 발생했는지 여부에 상관없이 구성 요소에 정보를 전달하는 것이 가장 좋습니다. 이렇게하면 리스너를 두 번 이상 바인딩 할 수있는 문제 1이 해결되고 모든 구성 요소 기능을 노출해야하는 필요성도 배제됩니다.

class ShortcutProvider extends Component { 
    state = { shortcut: null } 

    componentDidMount() { 
    // shortcut library listener 
    onShortcut(shortcut => this.setState({ shortcut }) 
    } 

    render() { 
    <App shortcut={this.state.shortcut} /> 
    } 
} 

그런 다음 위젯은 소품의 변화에 ​​반응 (또는 반응하지) 할 수

class Widget extends Component { 
    ... 

    componentWillReceiveProps(nextProps) { 
    if (this.state.shouldReactToShortcut) { 
     if (nextProps.shortcut === 'ctrl i') { 
     // do something 
     } 
    } 
    } 

    ... 
} 

바로 가기를 전달하는 경우 많은 구성 요소를 소품이 가치가있을 수 있습니다 그것은 바로 가기 상태를 넣어 맥락으로.