Как закрыть toggle?

Question

[ckatala]

Как закрыть toggle при нажатии в любое место?
Чтоб закрытие работало везде где бы я ни нажал, а не только на этот же див

constructor(props) {
    super(props);
    this.state = {
      etc_dropdown_toggle: false
    }
  }
  handle_etc_dropdown_toggle = () => {
    this.setState(prevstate => {
      return {
        etc_dropdown_toggle:
          prevstate.etc_dropdown_toggle === true ? false : true
      }
    })
  }

Далее

<div className='etc_control' onClick={this.handle_etc_dropdown_toggle}></div>

Answer 1

[Medin K]

Подписывайтесь на событие клика окна.
https://codesandbox.io/s/w2orr6nmzl

Comments

[ckatala]

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

Answer 2

[hzzzzl]

наверно пробрасывать propsы из родительских компонентов, и уже там отлавливать onClick и сохранять типа toggleOpened = true... ну или Redux, хотя если этих тогглов на странице куча, но наверняка есть другой метод поизящнее

Answer 3

[davidnum95]

Рисуем под кнопкой прозрачный div с position: "fixed" и растягиваем его на всю страницу, по клику на него вызываем toggle