Obsługa wejścia i mapy klawiszy
Poruszaj się po wdrożeniach klawiaturą i dodaj nakładkę pomocy pod ?.
W tym rozdziale
- `useInput`
- Mapy klawiszy
- Nakładka pomocy
- Fokus
Naciśnięcia klawiszy trafiają do twojej aplikacji przez ukryte pole tekstowe na stronie, więc strona musi mieć fokus. Dlatego każda aplikacja Text.js prosi najpierw o kliknięcie strony. Gdy strona ma fokus, każdy naciśnięty klawisz trafia do biblioteki React.
useInput
useInput to niskopoziomowy hook, z którego korzystasz do tej pory. Otrzymuje zdarzenie KeyEvent ze znormalizowaną wartością key ("up", "return", "escape"), wpisanym znakiem w input oraz polami ctrl, alt, shift i meta.
useInput((e) => { if (e.ctrl && e.key === "k") openPalette();});Wywołaj e.stopPropagation(), aby klawisz nie trafił do handlerów dalej w drzewie.
Mapy klawiszy
Gdy ekran obsługuje więcej niż kilka klawiszy, opisz je za pomocą useKeymap. Powiązania to ciągi znaków: "up, k" oznacza dowolny z tych klawiszy, "g g" to sekwencja, a "ctrl+k" to kombinacja klawiszy. Powiązania z etykietami pojawiają się też w <KeyHelp>, <KeyHints> i palecie poleceń.
Dodano: import { useState } from "react";Dodano: import { Box, KeyHelp, Text, useKeymap } from "@textjs/app";Dodano: import { DEPLOYMENTS } from "../../lib/deployments";Dodano: Dodano: export default function DeploymentsPage() {Dodano: const [index, setIndex] = useState(0);Dodano: const [open, setOpen] = useState(false);Dodano: const move = (by: number) => setIndex((i) => Math.max(0, Math.min(DEPLOYMENTS.length - 1, i + by)));Dodano: Dodano: useKeymap({Dodano: "up, k": { label: "Previous deployment", run: () => move(-1) },Dodano: "down, j": { label: "Next deployment", run: () => move(1) },Dodano: enter: { label: "Toggle details", run: () => setOpen((o) => !o) },Dodano: "g g": { label: "First deployment", run: () => setIndex(0) },Dodano: });Dodano: Dodano: return (Dodano: <Box className="flex-row grow p-1 gap-2">Dodano: <Box className="flex-col grow">Dodano: {DEPLOYMENTS.map((d, i) => (Dodano: <Box key={d.id} className="flex-row h-1 gap-2 px-1" backgroundColor={i === index ? "selection" : undefined}>Dodano: <Text>{i === index ? "›" : " "}</Text>Dodano: <Text bold={i === index} wrap="truncate-end">{d.commit}</Text>Dodano: </Box>Dodano: ))}Dodano: </Box>Dodano: {open && <Details deployment={DEPLOYMENTS[index]} />}Dodano: <KeyHelp />Dodano: </Box>Dodano: );Dodano: }Na razie DEPLOYMENTS to zwykła tablica w pliku lib/deployments.ts. W rozdziale 6 przeniesiesz dostęp do niej do handlera trasy.
Nakładka pomocy
<KeyHelp /> nasłuchuje klawisza ? i otwiera okno modalne z pogrupowaną listą wszystkich aktualnie aktywnych powiązań z etykietami. Naciśnij ? w konsoli, a potem ? lub q, aby je zamknąć. Powiązania wewnątrz okna modalnego zatrzymują w nim fokus, więc lista pod spodem przestaje reagować do czasu jego zamknięcia.
Fokus
Komponenty takie jak <Input>, <Select> i <Table> odbierają klawisze tylko wtedy, gdy mają fokus. Tab przenosi fokus między nimi; useFocus() i useFocusManager() pozwalają sterować nim samodzielnie.
Wypróbuj
To Acme Deploys na końcu rozdziału, uruchomiona w DevTools. Kliknij panel, a potem użyj poniższych klawiszy.
Otwórz konsolę
Aplikacja renderuje się w DevTools.Najpierw włącz „Pokazuj funkcje dla deweloperów witryn” w Safari: Ustawienia → Zaawansowane. Potem kliknij tutaj i naciśnij ↓.
Otwórz na komputerze
Ta aplikacja renderuje się w konsoli DevTools, która wymaga przeglądarki na komputerze.
Quiz
2 pytaniaOdpowiedz na wszystkie pytania, aby ukończyć rozdział.