Обработка кликов вне элемента в React useOutsideClick | Кастомные хуки
У нас есть кнопка при клике на которую открывается и закрывается модальное окно. Но есть проблема, если мы открыли модалку и кликаем вне модального окна, оно остается открытым.
Мы используем кастомный хук `useOutsideClick`, который принимает параметр `callback`, определяющий, какая функция вызовется при клике вне этого элемента.
Мы воспользуемся useRef для создания ссылки на элемент, который должен проверяться при клике вне его области.
В useEffect, мы подписываемся на клик. И добавляем cleanup функцию, чтобы удалить слушателя событий.
И возвращаем ref.
После создания нашего хука, мы можем использовать его в любом компоненте, в модалках, в тултипах и так далее.
#reactjs
#javascript
#usestate
#useeffect
#frontend
#hooks
#typescript
#shorts
Подписывайтесь на телеграмм, будем готовиться к собесам: https://t.me/it_tonylife
Подписывайтесь на boosty: https://boosty.to/maxfri
Watch video Обработка кликов вне элемента в React useOutsideClick | Кастомные хуки online without registration, duration hours minute second in high quality. This video was added by user Iaroslav Silkin | Front-end 03 May 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 3,70 once and liked it 18 people.