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

Question

[Николай Семенов]

Ребятушки, всем привет.
Есть вот такой элемент управления с выпадающем контекстном меню

render() {
    return (
      <div className="btn-dwn__wrap marginr-10">
          <button className={"btn-dwn btn--red" + (this.state.dropdownVisible ? ' active' : '')} onClick={this.handleFilterClick.bind(this)}>
            <svg className="icon" viewBox="0 0 100 100">
              <path d="M38.25,50h23.5v31.333L38.25,97V50z M3,3v7.833l35.25,35.25h23.5L97,10.833V3H3z"/>
            </svg>
          </button>
          <div className={"btn-dwn__dropdown" + (this.state.dropdownVisible ? ' active' : '')}></div>
      </div>
    );
  }

есть такой обработчик

handleFilterClick(event) {
    const target = event.target;
    this.setState(prevState => ({
      dropdownVisible: !prevState.dropdownVisible
    }))
  }

при клике то фильтру контекстное меню переключается норм. как задумано. А вот как сделать чтобы оно закрывалась если таргет не кнопка и не само меню? Подскажите плиз

Comments

[davidnum95]

Это не ответ на вопрос, посмотри вот это для управления классами

Answer 1

[davidnum95]

Как вариант:

componentDidMount() {
    document.addEventListener('click', this.onClickOutside);
  }

  componentWillUnmount() {
    document.removeEventListener('click', this.onClickOutside);
  }

  onClickOutside = () => {
    this.setState({ visible: false });
  }

Comments

[Николай Семенов]

Спасибо, думаю должно сработать..я тоже думал в этом направлении но все еще забываю про componentDidMount() ...хотел самовызывающуюся функцию сделать, но чувствовал что, не правильно будет или не совсем правильно

[Николай Семенов]

Скажите, а добавление в componentDidMount() и удаление в componentDidMount() С добавлением понятно, а удаление (не совсем понимаю)?

[davidnum95]

Николай Семенов, я тоже не понимаю вашего вопроса. В componentDidMount - вешаем обработчик, в componentWillUnmount - удаляем обработчик

[Николай Семенов]

davidnum95, я в том смысле - его нужно обязательно удалять?

[davidnum95]

Николай Семенов, не знаю обнуляет ли реакт ссылки на уничтоженные компоненты, но лучше перестраховаться и убрать слушателя, иначе может быть утечка.

[Николай Семенов]

davidnum95, и еще одни вопросик как передать событие в функцию, чтоб в не определить таргет, а то он будет закрывать на все. я всегда передавал в онклик(e)

[Николай Семенов]

нашел надо через функцию передать параметр в эту функцию

Answer 2

[Сергей Сунцев]

Как вариант могу подсказать - при открытии модального окна создать компонент с прозрачностью, width:100% height:100% и z-index < модалки
и повесить на него при клике обработчик закрытия модального окна

Для удобства можно поместить его в компонент модалки и просто скрывать display: none;

Comments

[davidnum95]

Вопрос читали?