ReactJS：空間ナビゲーションの操作（キーボードとゲームパッド）

Question

ReactJSでこのnetflix風のアプリを作成しています。空間的なコントロールを実装する必要があります。キーボードの矢印キー（タブではありません）またはゲームパッド1つの要素をその時点でフォーカスすることによって、

このアプリは、テレビやタブレットなどのあらゆるデバイスでwebviewで実行されるため、私が使いたいブラウザ固有のソリューションは、普遍的なサポートが必要です。

ゲームパッドとキーボードの矢印キーを使用してクロスブラウジング空間ナビゲーションを提供するreactjsライブラリまたはHTML5 APIがありますか？

Answer 1

それはJS-空間ナビゲーションのラッパーですhttps://github.com/dead/react-js-spatial-navigation を見てみましょう。私はテストテレビアプリケーションでこれを使用し、それは素晴らしい仕事をした！それはまだ例とドキュメントがありませんが、それはかなり簡単です。

<SpatialNavigation> 
// your components here 
// for a focusable content you can just wrapper it around the 
<Focusable onFocus={event => this.onFocusFunction(event)} onUnfocus={event => this.onUnfocusFunction(event)}> 
    // Your focusable content here 
</Focusable> 
// more components 
</SpatialNagivation> 

Answer 2

ライフサイクルフックcomponentDidMountおよびcomponentWillUnmountを使用して実行する必要のあるアクションを矢印キーでバインドおよびバインド解除することができます。Mousetrap.js

componentDidMount() { 
     Mousetrap.bind(theArrowKeyToBind,() => theActionToPerform); 
    } 
    componentWillUnmount() { 
     Mousetrap.unbind(theArrowKeyToBind,() => theActionToPerform); 
    }