輸入與按鍵對應
使用鍵盤瀏覽部署，並加入 ? 說明覆蓋層。
本章內容
- `useInput`
- 按鍵對應
- 說明浮層
- 焦點
按鍵會透過頁面上隱藏的輸入欄位傳入應用程式，因此頁面需要取得焦點。這就是每個 Text.js 應用程式都會要求你先點一下頁面的原因。頁面取得焦點後，你按下的每個按鍵都會傳送給 React。
useInput
useInput 是你目前一直使用的低階 Hook。它會收到一個 KeyEvent，其中包含正規化的 key（"up"、"return"、"escape"）、input 中輸入的字元，以及 ctrl、alt、shift 和 meta。
useInput((e) => { if (e.ctrl && e.key === "k") openPalette();});呼叫 e.stopPropagation()，阻止按鍵傳到元件樹更下層的處理常式。
按鍵對應
當畫面使用的按鍵不只兩三個時，使用 useKeymap 描述按鍵對應。綁定以字串表示："up, k" 表示任一按鍵，"g g" 表示依序按鍵，"ctrl+k" 表示組合鍵。有標籤的綁定也會出現在 <KeyHelp>、<KeyHints> 和命令選單中。
新增：import { useState } from "react";新增：import { Box, KeyHelp, Text, useKeymap } from "@textjs/app";新增：import { DEPLOYMENTS } from "../../lib/deployments";新增：新增：export default function DeploymentsPage() {新增： const [index, setIndex] = useState(0);新增： const [open, setOpen] = useState(false);新增： const move = (by: number) => setIndex((i) => Math.max(0, Math.min(DEPLOYMENTS.length - 1, i + by)));新增：新增： useKeymap({新增： "up, k": { label: "Previous deployment", run: () => move(-1) },新增： "down, j": { label: "Next deployment", run: () => move(1) },新增： enter: { label: "Toggle details", run: () => setOpen((o) => !o) },新增： "g g": { label: "First deployment", run: () => setIndex(0) },新增： });新增：新增： return (新增： <Box className="flex-row grow p-1 gap-2">新增： <Box className="flex-col grow">新增： {DEPLOYMENTS.map((d, i) => (新增： <Box key={d.id} className="flex-row h-1 gap-2 px-1" backgroundColor={i === index ? "selection" : undefined}>新增： <Text>{i === index ? "›" : " "}</Text>新增： <Text bold={i === index} wrap="truncate-end">{d.commit}</Text>新增： </Box>新增： ))}新增： </Box>新增： {open && <Details deployment={DEPLOYMENTS[index]} />}新增： <KeyHelp />新增： </Box>新增： );新增：}DEPLOYMENTS 目前是 lib/deployments.ts 中的一般陣列。第 6 章會改由路由處理常式提供這些資料。
說明浮層
<KeyHelp /> 會監聽 ?，並開啟互動視窗，分組列出目前所有生效且有標籤的綁定。在主控台按下 ?，再按 ? 或 q 關閉。互動視窗內的綁定會將焦點限制在視窗內，因此下方的清單會停止回應，直到視窗關閉。
焦點
<Input>、<Select> 和 <Table> 等元件只有在取得焦點時才會接收按鍵。Tab 可在這些元件之間移動焦點；useFocus() 和 useFocusManager() 則讓你自行控制焦點。
試用
這是本章結束時的 Acme Deploys，正在 DevTools 中執行。點擊操作區，再使用下方按鍵。
開啟主控台
應用程式在 DevTools 中渲染。先在 Safari「設定」→「進階」中開啟「顯示網頁開發者功能」。 接著點擊這裡並按 ↓。
在電腦上開啟
此應用程式在 DevTools 主控台中渲染，需要桌面版瀏覽器。
測驗
2 個問題回答所有問題以完成本章。