/
lizardking
/
react_project
Обзор
Документация
Войти
/
lizardking
/
react_project
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
src/features/refExample/ui/FocusTracker.tsx
37 строк
1 KB
LizardKing
Task 5 - styles
17 окт 2025, 14:23
17 окт 2025, 14:23
4ba1ff3
Код
Авторство
О чём код?
import React, { useRef } from 'react' import { Input } from 'shared/ui/Input' import { Section } from 'shared/ui/Section' import { useFocusTracker } from '../model/useFocusTracker' export function FocusTracker() { const firstInputRef = useRef<HTMLInputElement | null>(null) const secondInputRef = useRef<HTMLInputElement | null>(null) const { handleFocusCapture, focusFirstInput } = useFocusTracker(firstInputRef, secondInputRef) return ( <Section title="FocusTracker"> <div className="space-y-3"> <Input id="first" ref={firstInputRef} onFocusCapture={handleFocusCapture} placeholder="Первое поле" /> <Input id="second" ref={secondInputRef} onFocusCapture={handleFocusCapture} placeholder="Второе поле" /> <button type="button" onClick={focusFirstInput} className="bg-accent text-onAccent px-4 py-2 rounded-[--radius-md] hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-accent"> Сфокусировать на первом </button> </div> </Section> ) }