/
Percival
/
reactJS_course
Обзор
Документация
Войти
/
Percival
/
reactJS_course
Код
Запросы
4
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
task5
task_1_fsd/src/features/refExamples/FocusTracker.tsx
38 строк
959 B
Rituparn
Added the 5th task
26 окт 2025, 19:34
26 окт 2025, 19:34
72790f9
Код
Авторство
О чём код?
import { useRef } from 'react'; export const FocusTracker = () => { const input1Ref = useRef<HTMLInputElement>(null); const input2Ref = useRef<HTMLInputElement>(null); const focusTransitionsRef = useRef(0); const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => { if (event.relatedTarget) { focusTransitionsRef.current += 1; console.log(`Focus transitions: ${focusTransitionsRef.current}`); } }; const focusFirstInput = () => { input1Ref.current?.focus(); }; return ( <div> <h3>FocusTracker</h3> <input ref={input1Ref} type="text" placeholder="First input" onFocus={handleFocus} /> <input ref={input2Ref} type="text" placeholder="Second input" onFocus={handleFocus} /> <button onClick={focusFirstInput}>Focus First Input</button> <p>Open console to see focus transitions</p> </div> ); };