Определение места щелчка мышью в компоненте React

Question

В моем приложении React у меня есть боковая навигационная панель, которая открывается и закрывается нажатием на значок.

Если навигационная панель открыта и пользователь щелкает в любом месте за пределами навигационной панели, я все еще хочузакрой его.Как мне узнать, был ли клик за пределами навигационной панели?Основной вызов у ​​меня есть, чтобы убедиться, что щелчок не был на дочернем узле навигационной панели.Таким образом, проверки только навигационной системы, например, недостаточно:

mouseDownHandler(e) {

   var container = e.target;
   if(container !== "nav-bar") {

      // Do something...
   }
};

Мне также нужно убедиться, что область щелчка не является дочерней по отношению к nav-bar.

Answer 1

Вам необходимо добавить прослушиватель событий к элементу документа (например, в componentDidMount компонента вашей панели навигации) и удалить его, когда ваша панель навигации уничтожена (например, в componentWillUnmount).

Затем вам нужно будет ввести ссылку, чтобы получить дескриптор элемента вашей панели навигации.

Ответы на все вопросы, связанные с обработкой событий, приведены здесь: Обнаружение кликов за пределами определенного div и всеэто дети