ورودی و نقشهٔ کلیدها
با صفحه‌کلید بین استقرارها جابه‌جا شوید و یک لایهٔ راهنما با ? اضافه کنید.
در این فصل
- `useInput`
- نقشهٔ کلیدها
- لایهٔ راهنما
- فوکوس
کلیدهای فشرده‌شده از طریق یک ورودی پنهان در صفحه به برنامهٔ شما می‌رسند، بنابراین صفحه به فوکوس نیاز دارد. به همین دلیل، هر برنامهٔ Text.js از شما می‌خواهد ابتدا روی صفحه کلیک کنید. پس از فوکوس گرفتن صفحه، هر کلیدی که فشار دهید به React تحویل داده می‌شود.
useInput
هوک useInput همان هوک سطح پایینی است که تاکنون استفاده کرده‌اید. این هوک یک 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 پرسشبرای تکمیل فصل به همهٔ پرسش‌ها پاسخ دهید.