Как можно отслеживать клики, нажатие клавиши Enter и фокус на элементе CommandItem в Shadcn UI?

Каковы основные функции и компоненты, используемые в демонстрационном приложении CommandDemo, представленном в коде на TypeScript?
  • 1 ноября 2024 г. 6:33
Ответы на вопрос 1
Чтобы отслеживать клики, нажатия клавиши Enter и фокус на элементе CommandItem в Shadcn UI, вы можете использовать обработчики событий в React. Вот простой пример того, как это можно сделать:

```tsx
import React, { useEffect, useRef } from 'react';
import { Command, CommandItem } from 'shadcn/ui';

const CommandDemo: React.FC = () => {
  const commandRef = useRef<HTMLDivElement>(null);

  const handleClick = () => {
    console.log('CommandItem clicked');
  };

  const handleKeyPress = (event: KeyboardEvent) => {
    if (event.key === 'Enter') {
      console.log('Enter key pressed');
    }
  };

  const handleFocus = () => {
    console.log('CommandItem focused');
  };

  useEffect(() => {
    const commandElement = commandRef.current;
    if (commandElement) {
      commandElement.addEventListener('keypress', handleKeyPress);
      commandElement.addEventListener('focus', handleFocus);
    }

    return () => {
      if (commandElement) {
        commandElement.removeEventListener('keypress', handleKeyPress);
        commandElement.removeEventListener('focus', handleFocus);
      }
    };
  }, []);

  return (
    <Command ref={commandRef}>
      <CommandItem onClick={handleClick} onFocus={handleFocus}>
        Click me or press Enter
      </CommandItem>
    </Command>
  );
};

export default CommandDemo;
```

### Объяснение кода:
- **handleClick**: Обработчик клика, который выводит сообщение в консоль при нажатии на элемент.
- **handleKeyPress**: Обработчик нажатия клавиш, который проверяет, была ли нажата клавиша Enter.
- **handleFocus**: Обработчик фокуса, который срабатывает при получении элемента фокуса.
- **useEffect**: здесь навешиваются обработчики событий на элемент при его монтировании и снимаются при размонтировании.

### Основные функции и компоненты в CommandDemo:
1. **Command**: Компонент, который служит контейнером для элементов команды и управления состоянием.
2. **CommandItem**: Элемент внутри Command, который представляет отдельный элемент команды, на который можно кликнуть или взаимодействовать с ним (например, клавишами).

Эти компоненты использованы для реализации интерфейса команд, где каждый элемент, как правило, представляет собой действие или опцию, доступную пользователю. Вы можете настроить дополнительную логику обработки в рамках этих компонентов в зависимости от требований вашего приложения.
Похожие вопросы