@WarriorKodeK

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

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

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

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

Спасибо
  • Вопрос задан
  • 117 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега React
Как-то у вас всё переусложнено.

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

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

Похоже на то, к чему вы стремились?
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы