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

Question

[Сергей]

Добрый день. В приложении есть возможность редактировать пункты меню. У каждого пункта есть кнопка, по нажатию на которую появляется всплывающее меню. Я планирую это реализовать с помощью классов css. Как реализовать сворачивание этого элемента при клике на любую другую область?

Answer 1

[0xD34F]

Следить за кликами за пределами корневого узла:

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);
}

Comments

[Сергей]

Спасибо!

Answer 2

[Антон Иванов]

Добрый день. Вам нужно нечто подобное этому
https://www.npmjs.com/package/react-onclickoutside