Выбор ответа Junior Компоненты на практике обновлено
Закрытие модалки по клику на подложку
Вопрос
Модалка закрывается даже при клике по кнопке внутри окна. Как исправить, не ломая закрытие по подложке?
function Modal({ onClose, children }) {
return createPortal(
<div className="backdrop" onClick={onClose}>
<div className="dialog" role="dialog" aria-modal="true">{children}</div>
</div>,
document.body,
);
}
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: Закрывать, только если e.target === e.currentTarget (клик по подложке). Клик внутри окна всплывает до подложки.
Варианты ответа
- Перенести
onClickс подложки наdocumentи закрывать по любому клику - Убрать
onClickу подложки и закрывать модалку только по Escape - Закрывать, только если
e.target === e.currentTarget(клик по подложке)правильный ответ - Добавить окну
pointer-events: none, чтобы клики проходили сквозь него
Разбор
Клик внутри окна всплывает до подложки. Сравнение e.target (где кликнули) и e.currentTarget (где висит обработчик) отличает клик по подложке от клика внутри. Альтернатива: e.stopPropagation() на окне.
- Обработчик на
documentпоймает ещё больше кликов. - Убрать закрытие по подложке значит ухудшить UX, а не исправить ошибку.
pointer-events: noneсделает окно некликабельным.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.