twenty/packages/twenty-docs/l/hu/developers/frontend-development/hotkeys.mdx

---
title: Billentyűparancsok
image: /images/user-guide/table-views/table.png
---

<Frame>
  <img src="/images/user-guide/table-views/table.png" alt="Header" />
</Frame>

## Bevezetés

Ha billentyűparancsot szeretne hallgatni, általában az `onKeyDown` eseményfigyelőt használná.

A `twenty-front` alkalmazásban azonban előfordulhat, hogy ugyanazokat a billentyűparancsokat különböző komponensek használják egy időben, ami ütközésekhez vezethet.

For example, if you have a page that listens for the Enter key, and a modal that listens for the Enter key, with a Select component inside that modal that listens for the Enter key, you might have a conflict when all are mounted at the same time.

## The `useScopedHotkeys` hook

Ennek a probléma kezelésére van egy egyedi horog, amely lehetővé teszi a billentyűparancsok figyelését ütközés nélkül.

Helyezze el egy komponensben, és az csak akkor fogja figyelni a billentyűparancsokat, amikor a komponens be van töltve ÉS amikor az adott **billentyűparancs tartomány** aktív.

## How to listen for hotkeys in practice?

Két lépés szükséges a billentyűparancs hallgatásának beállításához:

1. Set the [hotkey scope](#what-is-a-hotkey-scope-) that will listen to hotkeys
2. Használja a `useScopedHotkeys` horogot a billentyűparancsok hallgatására

A billentyűparancs-tartományok beállítása szükséges még egyszerű oldalak esetén is, mivel másfelhasználói elemek, mint a bal menü vagy parancsmenü is figyelhetnek a billentyűparancsokra.

## Billentyűparancsok használati esetei

Általánosságban elmondható, hogy két használati eset szükséges a billentyűparancsokhoz:

1. Egy oldalon vagy egy oldalban betöltött komponensben
2. Egy modális típusú komponensben, amely a felhasználói akció miatt veszi át a fókuszt

A második eset rekurzívan is előfordulhat: például egy lenyíló lista egy modális ablakban.

### Billentyűparancsok hallgatása egy oldalon

Példa:

```tsx
const PageListeningEnter = () => {
  const {
    setHotkeyScopeAndMemorizePreviousScope,
    goBackToPreviousHotkeyScope,
  } = usePreviousHotkeyScope();

  // 1. Set the hotkey scope in a useEffect
  useEffect(() => {
    setHotkeyScopeAndMemorizePreviousScope(
      ExampleHotkeyScopes.ExampleEnterPage,
    );

    // Revert to the previous hotkey scope when the component is unmounted
    return () => {
      goBackToPreviousHotkeyScope();
    };
  }, [goBackToPreviousHotkeyScope, setHotkeyScopeAndMemorizePreviousScope]);

  // 2. Use the useScopedHotkeys hook
  useScopedHotkeys(
    Key.Enter,
    () => {
      // Some logic executed on this page when the user presses Enter
      // ...
    },
    ExampleHotkeyScopes.ExampleEnterPage,
  );

  return <div>My page that listens for Enter</div>;
};
```

### Billentyűparancsok hallgatása modális típusú komponensben

Ehhez a példához egy modális komponenst fogunk használni, amely az Escape kulcsra figyel, hogy megmondja a szülőnek, zárja be.

Itt a felhasználói interakció változtatja meg a tartományt.

```tsx
const ExamplePageWithModal = () => {
  const [showModal, setShowModal] = useState(false);

  const {
    setHotkeyScopeAndMemorizePreviousScope,
    goBackToPreviousHotkeyScope,
  } = usePreviousHotkeyScope();

  const handleOpenModalClick = () => {
    // 1. Set the hotkey scope when user opens the modal
    setShowModal(true);
    setHotkeyScopeAndMemorizePreviousScope(
      ExampleHotkeyScopes.ExampleModal,
    );
  };

  const handleModalClose = () => {
    // 1. Revert to the previous hotkey scope when the modal is closed
    setShowModal(false);
    goBackToPreviousHotkeyScope();
  };

  return <div>
    <h1>My page with a modal</h1>
    <button onClick={handleOpenModalClick}>Open modal</button>
    {showModal && <MyModalComponent onClose={handleModalClose} />}
  </div>;
};
```

Ezután a modális komponensben:

```tsx
const MyDropdownComponent = ({ onClose }: { onClose: () => void }) => {
  // 2. Use the useScopedHotkeys hook to listen for Escape.
  // Note that escape is a common hotkey that could be used by many other components
  // So it's important to use a hotkey scope to avoid conflicts
  useScopedHotkeys(
    Key.Escape,
    () => {
      onClose()
    },
    ExampleHotkeyScopes.ExampleModal,
  );

  return <div>My modal component</div>;
};
```

Fontos ezt a mintát használni, amikor nem biztos, hogy pusztán a useEffect használata a telepítésekkel/leszerelésekkel elegendő lesz az ütközések elkerüléséhez.

Ezek az ütközések nehezen hibakereshetők, és gyakrabban fordulhatnak elő, mint gondolná a useEffects használatakor.

## Mi a billentyűparancs tartomány?

A billentyűparancs tartomány egy olyan string, amely azt a környezetet képviseli, amelyben a billentyűparancsok aktívak. Általában egy enumerációként van kódolva.

Amikor megváltoztatja a billentyűparancs-tartományt, az azokra hallgató billentyűparancsok lesznek engedélyezve, amelyek erre a tartományra figyelnek, míg más tartományokban hallgató billentyűparancsok inaktívak lesznek.

Egyszerre csak egy tartományt lehet beállítani.

Példaként az oldalakat érintő billentyűparancs tartományok a `PageHotkeyScope` enumerációban vannak meghatározva:

```tsx
export enum PageHotkeyScope {
  Settings = 'settings',
  CreateWorkspace = 'create-workspace',
  SignInUp = 'sign-in-up',
  CreateProfile = 'create-profile',
  PlanRequired = 'plan-required',
  ShowPage = 'show-page',
  PersonShowPage = 'person-show-page',
  CompanyShowPage = 'company-show-page',
  CompaniesPage = 'companies-page',
  PeoplePage = 'people-page',
  OpportunitiesPage = 'opportunities-page',
  ProfilePage = 'profile-page',
  WorkspaceMemberPage = 'workspace-member-page',
  TaskPage = 'task-page',
}
```

Belsőleg az aktuálisan kiválasztott tartomány egy Recoil állapotban van tárolva, amelyet az egész alkalmazás megoszt:

```tsx
export const currentHotkeyScopeState = createState<HotkeyScope>({
  key: 'currentHotkeyScopeState',
  defaultValue: INITIAL_HOTKEYS_SCOPE,
});
```

De ezt a Recoil állapotot soha nem kell manuálisan kezelni! A következő részben meglátjuk, hogyan kell használni.

## Hogyan működik belsőleg?

Készítettünk egy vékony borítást a [react-hotkeys-hook](https://react-hotkeys-hook.vercel.app/docs/intro) tetején, ami hatékonyabbá teszi és elkerüli a szükségtelen újrafestéseket.

Készítünk egy Recoil állapotot is, amely kezeli a hotkey tartomány állapotát, és elérhetővé teszi az alkalmazás mindenhol.