@Banjamin
Пишу

Как закрывать всплывающее окно в react?

Добрый день. В приложении есть возможность редактировать пункты меню. У каждого пункта есть кнопка, по нажатию на которую появляется всплывающее меню. Я планирую это реализовать с помощью классов css. Как реализовать сворачивание этого элемента при клике на любую другую область?
  • Вопрос задан
  • 2855 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега React
Следить за кликами за пределами корневого узла:

function Modal(props) {
  const root = useRef();

  useEffect(() => {
    const onClick = e => root.current.contains(e.target) || закрытьОкно();
    document.addEventListener('click', onClick);
    return () => document.removeEventListener('click', onClick);
  }, []);

  return (
    <div ref={root}>
      ...
    </div>
  );
}

Или сделать так, чтобы корневой узел перекрывал всю страницу, и отслеживать клики по нему:

function Modal(props) {
  return (
    <div
      className="modal-overlay"
      onClick={e => (e.currentTarget === e.target) && закрытьОкно()}
    >
      ...
    </div>
  );
}

.modal-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@karminski
Senior React.JS Developer
Добрый день. Вам нужно нечто подобное этому
https://www.npmjs.com/package/react-onclickoutside
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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