как скрыть раскрывающийся список bulma в реакции

Как я могу использовать триггерное событие для пункта меню в раскрывающемся списке Bulma в ответ?

Я не знаю, как скрыть меню, так как кнопка не является родителем меню.

 <div className="dropdown is-active">
   <div className="dropdown-trigger">
     <button className="button" aria-haspopup="true" aria-controls="dropdown-menu">
       <span>Dropdown button</span>
         <span className="icon is-small">
           <i className="fas fa-angle-down" aria-hidden="true"></i>
         </span>
     </button>
   </div>
   <div className="dropdown-menu" id="dropdown-menu" role="menu">
     <div className="dropdown-content">
       <a href="#" class="dropdown-item">
         Dropdown item
       </a>
     </div>
   </div>
 </div>

reactjs bulma
person minimin_bamm    schedule 15.01.2020    source источник
comment
Вы используете react-bulma-components?   -  person N'Bayramberdiyev    schedule 15.01.2020
comment
@ Н'Байрамбердиев Нет   -  person minimin_bamm    schedule 16.01.2020

Ответы (2)


arrow_upward
3
arrow_downward

Это можно сделать, переключив имя класса в зависимости от условия. Вот пример, основанный на вашем коде:

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = { collapsed: true };
    }
  
    handleToggle() {
        this.setState({ collapsed: !this.state.collapsed });
    }

    render() {
        return(
            <div className={"dropdown" + (this.state.collapsed ? "" : " is-active")} tabIndex="0" onBlur={() => this.handleToggle()}>
                <div className="dropdown-trigger">
                    <button className="button" aria-haspopup="true" aria-controls="dropdown-menu" onClick={() => this.handleToggle()}>
                        <span>Dropdown button</span>
                        <span className="icon is-small">
                            <i className="fas fa-angle-down" aria-hidden="true"></i>
                        </span>
                    </button>
                </div>
                <div className="dropdown-menu" id="dropdown-menu" role="menu">
                    <div className="dropdown-content">
                        <a href="#" className="dropdown-item">Dropdown item</a>
                    </div>
                </div>
            </div>
        );
    }
}

ReactDOM.render(<App />, document.getElementById('root'));
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<div id="root"></div>

person N'Bayramberdiyev    schedule 16.01.2020

arrow_upward
0
arrow_downward

Это мой ответ.

is-hidden — функция булмы

state = {
    isHide: "is-hidden"
  }

  handleToggle = () => {
    if(this.state.isHide == "is-hidden") {
      this.setState(state => ({
        isHide: ""
      }));
    }
    else {
      this.setState(state => ({
        isHide: "is-hidden"
      }));
    }
  }

<div className="dropdown is-active">
   <div className="dropdown-trigger">
     <button className="button" aria-haspopup="true" aria-controls="dropdown-menu">
       <span>Dropdown button</span>
         <span className="icon is-small">
           <i className="fas fa-angle-down" aria-hidden="true"></i>
         </span>
     </button>
   </div>
   <div className={menuHidden} id="dropdown-menu" role="menu">
     <div className="dropdown-content">
       <a href="#" class="dropdown-item">
         Dropdown item
       </a>
     </div>
   </div>
 </div>
person minimin_bamm    schedule 15.01.2020