Как обработчику на клик игнорировать модальное окно?

Question

[WarriorKodeK]

Всем привет.
У меня есть компонента которая рендерит тег p с контентом, если мы хочем изменить контент, то нужно кликнуть на елемент, тогда у нас появиться инпут, где мы уже можем редактировать контент. Что-бы вернуться назад к простому view контента надо кликнуть на любое место в DOM. Ч то-бы сохранить данные, нужно просто нажать Enter.

Все хорошо работает, но если пользователь захочет закрыть инпут по клику на любое место в DOM, но контент менялся, то нужно выводить попап что есть несохранные данные. Проблема в том что обработчик также действует на модалку и надо как-то игнорировать это.

Вот пример - https://codesandbox.io/s/jpzq1n6r85

Спасибо

Comments

[yarnstart]

https://codesandbox.io/s/w2nvvl64l , если я правильно понял, то достаточно добавить проверку, является ли цель клика фоном попапа, если да - return :

if (target.classList.contains("ant-modal-wrap")) return false;

[WarriorKodeK]

eugenekazakov, Только это не решает проблему, потому что клик на body висит и вызывает showConfirm

Answer 1

[0xD34F]

Как-то у вас всё переусложнено.

Зачем вешать обработчик клика на body? - можно же добавить инпуту autoFocus={true} и отключать редактирование по событию blur. Так проблема с ненужным срабатыванием обработчика клика решится сама собой.

Как вы собираетесь отменять результаты редактирования, если постоянно перетираете стейт? - предыдущее значение теряется. Лучше вырезать обработчик onChange, а вместо value задавать defaultValue.

Похоже на то, к чему вы стремились?

Comments

[WarriorKodeK]

Воу, спасибо большое!!