Nhập liệu và Keymap
Dùng bàn phím để di chuyển giữa các bản triển khai và thêm lớp trợ giúp ?.
Trong chương này
- `useInput`
- Keymap
- Lớp phủ trợ giúp
- Tiêu điểm
Thao tác gõ phím đến ứng dụng qua một ô nhập ẩn trên trang, nên trang cần có tiêu điểm. Vì vậy, mọi ứng dụng Text.js đều yêu cầu bạn nhấp vào trang trước. Khi trang có tiêu điểm, mỗi phím bạn nhấn đều chuyển đến React.
useInput
useInput là hook cấp thấp bạn đã dùng từ đầu đến giờ. Hook này nhận một KeyEvent với key đã chuẩn hóa ("up", "return", "escape"), ký tự đã gõ trong input, cùng ctrl, alt, shift và meta.
useInput((e) => { if (e.ctrl && e.key === "k") openPalette();});Gọi e.stopPropagation() để ngăn một phím đến các handler ở sâu hơn trong cây.
Keymap
Khi một màn hình có nhiều hơn vài phím, mô tả chúng bằng useKeymap. Các liên kết phím là chuỗi: "up, k" là một trong hai phím, "g g" là một chuỗi phím, "ctrl+k" là một tổ hợp phím. Liên kết phím có nhãn cũng xuất hiện trong <KeyHelp>, <KeyHints> và bảng lệnh.
Đã thêm: import { useState } from "react";Đã thêm: import { Box, KeyHelp, Text, useKeymap } from "@textjs/app";Đã thêm: import { DEPLOYMENTS } from "../../lib/deployments";Đã thêm: Đã thêm: export default function DeploymentsPage() {Đã thêm: const [index, setIndex] = useState(0);Đã thêm: const [open, setOpen] = useState(false);Đã thêm: const move = (by: number) => setIndex((i) => Math.max(0, Math.min(DEPLOYMENTS.length - 1, i + by)));Đã thêm: Đã thêm: useKeymap({Đã thêm: "up, k": { label: "Previous deployment", run: () => move(-1) },Đã thêm: "down, j": { label: "Next deployment", run: () => move(1) },Đã thêm: enter: { label: "Toggle details", run: () => setOpen((o) => !o) },Đã thêm: "g g": { label: "First deployment", run: () => setIndex(0) },Đã thêm: });Đã thêm: Đã thêm: return (Đã thêm: <Box className="flex-row grow p-1 gap-2">Đã thêm: <Box className="flex-col grow">Đã thêm: {DEPLOYMENTS.map((d, i) => (Đã thêm: <Box key={d.id} className="flex-row h-1 gap-2 px-1" backgroundColor={i === index ? "selection" : undefined}>Đã thêm: <Text>{i === index ? "›" : " "}</Text>Đã thêm: <Text bold={i === index} wrap="truncate-end">{d.commit}</Text>Đã thêm: </Box>Đã thêm: ))}Đã thêm: </Box>Đã thêm: {open && <Details deployment={DEPLOYMENTS[index]} />}Đã thêm: <KeyHelp />Đã thêm: </Box>Đã thêm: );Đã thêm: }Hiện tại, DEPLOYMENTS là một mảng thông thường trong lib/deployments.ts. Chương 6 chuyển mảng này ra sau một route handler.
Lớp phủ trợ giúp
<KeyHelp /> lắng nghe phím ? và mở một hộp thoại liệt kê theo nhóm mọi liên kết phím có nhãn đang hoạt động. Nhấn ? trong console, rồi nhấn ? hoặc q để đóng. Liên kết phím bên trong hộp thoại giữ tiêu điểm trong đó, nên danh sách bên dưới ngừng phản hồi cho đến khi hộp thoại đóng.
Tiêu điểm
Component như <Input>, <Select> và <Table> chỉ nhận phím khi có tiêu điểm. Tab chuyển tiêu điểm giữa chúng; useFocus() và useFocusManager() cho phép bạn tự chuyển tiêu điểm.
Dùng thử
Đây là Acme Deploys ở cuối chương, đang chạy trong DevTools. Nhấp vào vùng focus, rồi dùng các phím bên dưới.
Mở console
Ứng dụng render trong DevTools.Trước tiên bật “Hiển thị tính năng cho nhà phát triển web” trong Cài đặt Safari → Nâng cao. Sau đó nhấp vào đây và nhấn ↓.
Mở trên máy tính
Ứng dụng này render trong console của DevTools, cần trình duyệt trên máy tính.
Bài trắc nghiệm
2 câu hỏiTrả lời mọi câu hỏi để hoàn thành chương.