Girdi ve tuş haritaları
Dağıtımlar arasında klavyeyle gezinin ve ? yardım katmanı ekleyin.
Bu bölümde
- `useInput`
- Tuş haritaları
- Yardım katmanı
- Odak
Tuş vuruşları uygulamanıza sayfadaki gizli bir giriş alanı üzerinden ulaşır; bu nedenle sayfanın odakta olması gerekir. Bu yüzden her Text.js uygulaması önce sayfaya tıklamanızı ister. Sayfa odağı aldıktan sonra bastığınız her tuş React’e iletilir.
useInput
useInput, şimdiye kadar kullandığınız düşük seviyeli hook’tur. Normalleştirilmiş bir key ("up", "return", "escape"), input içinde yazılan karakter ve ctrl, alt, shift ile meta içeren bir KeyEvent alır.
useInput((e) => { if (e.ctrl && e.key === "k") openPalette();});Bir tuşun ağaçta daha aşağıdaki işleyicilere ulaşmasını önlemek için e.stopPropagation() çağırın.
Tuş haritaları
Bir ekranda birkaç tuştan fazlası olduğunda bunları useKeymap ile tanımlayın. Bağlamalar dizedir: "up, k" iki tuştan herhangi birini, "g g" bir diziyi, "ctrl+k" ise aynı anda basılan tuşları belirtir. Etiketli bağlamalar <KeyHelp>, <KeyHints> ve komut paletinde de görünür.
Eklenen: import { useState } from "react";Eklenen: import { Box, KeyHelp, Text, useKeymap } from "@textjs/app";Eklenen: import { DEPLOYMENTS } from "../../lib/deployments";Eklenen: Eklenen: export default function DeploymentsPage() {Eklenen: const [index, setIndex] = useState(0);Eklenen: const [open, setOpen] = useState(false);Eklenen: const move = (by: number) => setIndex((i) => Math.max(0, Math.min(DEPLOYMENTS.length - 1, i + by)));Eklenen: Eklenen: useKeymap({Eklenen: "up, k": { label: "Previous deployment", run: () => move(-1) },Eklenen: "down, j": { label: "Next deployment", run: () => move(1) },Eklenen: enter: { label: "Toggle details", run: () => setOpen((o) => !o) },Eklenen: "g g": { label: "First deployment", run: () => setIndex(0) },Eklenen: });Eklenen: Eklenen: return (Eklenen: <Box className="flex-row grow p-1 gap-2">Eklenen: <Box className="flex-col grow">Eklenen: {DEPLOYMENTS.map((d, i) => (Eklenen: <Box key={d.id} className="flex-row h-1 gap-2 px-1" backgroundColor={i === index ? "selection" : undefined}>Eklenen: <Text>{i === index ? "›" : " "}</Text>Eklenen: <Text bold={i === index} wrap="truncate-end">{d.commit}</Text>Eklenen: </Box>Eklenen: ))}Eklenen: </Box>Eklenen: {open && <Details deployment={DEPLOYMENTS[index]} />}Eklenen: <KeyHelp />Eklenen: </Box>Eklenen: );Eklenen: }DEPLOYMENTS şimdilik lib/deployments.ts dosyasında düz bir dizidir. Bölüm 6’da bir rota işleyicisinin arkasına taşınır.
Yardım katmanı
<KeyHelp />, ? tuşunu dinler ve o anda etkin olan tüm etiketli bağlamaları gruplar halinde listeleyen bir modal açar. Konsolda ? tuşuna, ardından kapatmak için ? veya q tuşuna basın. Modal içindeki bağlamalar odağı içeride tutar; bu nedenle alttaki liste modal kapanana kadar tepki vermez.
Odak
<Input>, <Select> ve <Table> gibi bileşenler yalnızca odaktayken tuşları alır. Tab odağı bunlar arasında taşır; useFocus() ve useFocusManager() bunu kendiniz yapmanızı sağlar.
Dene
Bu, Acme Deploys uygulamasının bölüm sonundaki hâli; DevTools’ta çalışıyor. Odak alanına tıklayın, ardından aşağıdaki tuşları kullanın.
Konsolu açın
Uygulama DevTools’ta render edilir.Önce Safari Ayarlar → İleri Düzey bölümünde “Web geliştiricileri için özellikleri göster” seçeneğini açın. Sonra buraya tıklayın ve ↓ tuşuna basın.
Masaüstünde açın
Bu uygulama DevTools konsolunda render edilir; bunun için masaüstü tarayıcısı gerekir.
Test
2 soruBölümü tamamlamak için tüm soruları yanıtlayın.