Вопрос проверяет умение создавать интерактивные UI-компоненты с обработкой событий и управлением состоянием в React.
Модальное окно реализуется как компонент, который отображается поверх основного контента. Обработка клика вне модалки (outside click) делается через проверку цели события: если клик был не по модалке, то закрываем ее.
Структура модального окна:
Компонент модалки рендерится в отдельном портале (например, в document.body) для избежания проблем с z-index.
Состояние видимости управляется через React-стейт.
Обработка outside click:
Добавляем обработчик клика на документ при открытии модалки.
В обработчике проверяем, был ли клик внутри модалки (используя ref).
Если клик был снаружи, закрываем модалку.
Пример реализации:
const Modal = ({ isOpen, onClose, children }) => {
const modalRef = useRef();
useEffect(() => {
const handleClickOutside = (event) => {
if (modalRef.current && !modalRef.current.contains(event.target)) {
onClose();
}
};
if (isOpen) {
document.addEventListener('mousedown', handleClickOutside);
}
return () => {
document.removeEventListener('mousedown', handleClickOutside);
};
}, [isOpen, onClose]);
if (!isOpen) return null;
return ReactDOM.createPortal(
<div className="modal-overlay">
<div ref={modalRef} className="modal-content">
{children}
<form>
<input type="text" placeholder="Login" />
<input type="password" placeholder="Password" />
<button type="submit">Login</button>
</form>
</div>
</div>,
document.body
);
};Улучшения:
Добавление анимаций появления/исчезновения.
Обработка клавиши Escape для закрытия.
Блокировка скролла тела страницы при открытой модалке.