Чтобы отслеживать клики, нажатия клавиши 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, который представляет отдельный элемент команды, на который можно кликнуть или взаимодействовать с ним (например, клавишами).
Эти компоненты использованы для реализации интерфейса команд, где каждый элемент, как правило, представляет собой действие или опцию, доступную пользователю. Вы можете настроить дополнительную логику обработки в рамках этих компонентов в зависимости от требований вашего приложения.