Обработка кликов вне элемента в 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
Смотрите видео Обработка кликов вне элемента в React useOutsideClick | Кастомные хуки онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Iaroslav Silkin | Front-end 03 Май 2024, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 3,70 раз и оно понравилось 18 людям.