Как реализовывают dropdown-menu в react?

Question

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

Всем привет!
Ребят подскажите как осуществить появление и сокрытие выпадающего контекстного меню по клику в react?
во vue там можно было по клике менять в true и если true добавлять класс.
я к тому что в приложениях на фреймфорках вроде как не камильфо юзать квериселектор и иже с ними

Comments

[vasIvas]

Все зависит от того, как именно у Вас меню открывается. Если просто появляется и исчезает, то можно вообще с помощью css сделать .dropdown[data-toggle="false"] .menu { display: hidden; } Но если нужна анимация, то это уже нужно вывернутся наизнанку. И проблема не работе с dom, а в том что именно в реакте компонент не может работать с другими компонентами, хотя это нормально и даже более чем естественно. Компоненты должны работать с другими компонентами напрямую.

Но в последних своих проектах я остановился на сервесной логике, то есть всю логику инкапсулировал в сервисах, которые передавал нужным компонентам. К примеру в bootstrap3 Вы указываете идентификаторы и задаете свои свойства. А при использовании сервисов, Вы просто устанавливаете сервисы.

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

vasIvas, я в реакте только вот вот, половину только из вашего понял)) но все равно спасибо.

Answer 1

[Vit]

А в чем проблема?
Заводите в state компонента флаг isVisible.
В методе render в зависимости от его значение рендерите или не рендерите выпадающее меню.
Если вам нужно его показывать - делаете setState({ isVisible: true }), если надо скрыть - setState({ isVisible: false })

Comments

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

попробовал, но не особо получилось

import React, {Component} from 'react';
/**
 * class declaration
 */
class Filter extends Component {
  constructor() {
    super();
    this.handleDropdownClick = this.handleDropdownClick.bind(this);
    this.state = {dropdownVisible: false};
  }
  handleDropdownClick(event) {
    this.setState({dropdownVisible: !this.state.dropdownVisible})
  }
   /**
   * Renders "Filter component"
   * @return {string} - HTML markup for the component
   */
  render() {
    const dropdownVisible = this.state.dropdownVisible;
    return (
      <div className="btn-dwn__wrap marginr-10">
          <button className="btn-dwn btn--red" onClick={this.handleDropdownClick}>
            <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" dropdownVisible={dropdownVisible}></div>
      </div>
    );
  }
}

export default Filter;

пишет что в див нельзя Warning: Unknown prop `dropdownVisible` on tag. Remove this prop from the element.

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

iamevg_, та же ошибка

[davidnum95]

Николай Семенов, вам нужно устанавливать стили или классы в зависимости от dropdownVisible.
Что то типа:

<div className="btn-dwn__dropdown" style={{display: dropdownVisible ? 'block' : 'none'}}></div>