React.js：鍵盤導航

我正在嘗試在React中重寫當前基於Backbone的應用程序。讓我頭疼的一件功能是鍵盤導航。該應用必須使用鍵盤才能導航。這大致是這樣的樣子：React.js：鍵盤導航

有幾個按鈕的頭部元素。根據網絡請求的結果，還有一個可導航元素的主要區域是動態構建的。主區域中的元素以一種格子排列在屏幕上（通常，每行3個元素2行，儘管在模型中我顯示了2個元素的行）。

重點是最初在元素1（雖然如果沒有元素已被提取，那麼我猜應該集中一個標題按鈕）。使用箭頭鍵，人們應該能夠在組件內導航（使用向右箭頭鍵從元素1到元素2;使用向左箭頭鍵從元素2到元素1;使用向下箭頭鍵從元素1到元素3，等等）以及組件之間（從元素1到使用向上箭頭的標題的按鈕1;使用向下鍵等從標題的按鈕1到元素1）。當聚焦在適當的元素上時，按下箭頭按鈕時，應將不適合屏幕的元素放入視圖中（例如，在聚焦元素2時應向右滾動應向右滾動主區域，將元素5放入視口中）。

目前，在最初的基於Backbone的應用程序中，通過向所有可導航元素添加自定義屬性，然後使用第三方基於jQuery的庫來計算屏幕上元素的絕對位置，取決於它們相對於彼此的位置，將焦點從一個元素移動到下一個元素。什麼會是一個慣用的React（+ Redux，如果可能）重現這種行爲的方式？

來源

2016-03-07 azangru

不知道這是否會爲圖片添加任何內容，或只是重新提供您已有的舊解決方案，但我設置了很多類似的東西（同樣在我現在在React中執行的Backbone + jQuery應用程序中）。基本上做你所描述的：看着兄弟姐妹，並根據左/右或上/下箭頭比較頂部或左邊的座標。大部分邏輯在https://github.com/jmm/Jeopardy-Scorekeeper/blob/2eca1f1170a87e4ed9b56753b30ff26e3622ce7b/src/rsrc/view/dialog/dialog.js中。有了React，如果你需要出於某種原因，我想你可以使用refs給孩子找到與組件有關的節點。 – JMM

我的建議：

添加和事件偵聽器爲元素的容器組件。在componentDidMount中設置一個事件監聽器，用一個回調函數以某種方式計算下一個元素的基礎是什麼按鈕（我很難建議這一點 - 如果你嚴格限制每頁最多隻有4行，那麼最多2行）你可以做類似(left) => current - 1,right (right) => current + 1,(down) => current + (count/2)等）。這將火象

{ type: ELEMENT_SELECTED, payload: { selectedElID } }

一個動作，或者如果你只是保持它在本地狀態，this.setState({ selectedEl })

然後在你的渲染功能，始終確保其呈現在視圖中選擇的元素。

這有道理嗎？

來源

2016-03-07 20:23:30

它確實有道理，謝謝你的建議。我看到的這種方法唯一的問題是它假設了很多（可能太多）關於頁面結構的問題。我喜歡的是一種方法，它不可知論頁面上的元素數量以及它們的特定位置，但僅依賴於元素在屏幕上的相對位置來指導從一個元素移動到下一個。 – azangru

順便說一下，你將如何聽重要的新聞事件？ – azangru

沒有做任何真正的審查，這看起來像它可能很酷：https://www.npmjs.com/package/react-keydown 這就是說，確定哪一個去下一個取決於您的要求。根據您的要求更新您的問題或者將其作爲一個不同的SO問題可能會很有用。想到的一個想法是對dom兒童進行排序，並尋找那些在頁面上共有x位置的人......如果我有時間思考，我會更新我的答案。 –

React.js：鍵盤導航

回答

相關問題