如何在反应中隐藏布尔玛下拉菜单

Question

如何在 React 的 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>

Answer 1

这是我的答案。

is-hidden 是 bulma 的函数

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>

Answer 2

这可以通过根据条件切换 class 名称来完成。这是一个基于您的代码的示例：

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/bulma@0.8.0/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>

如何在反应中隐藏布尔玛下拉菜单

how to hide bulma dropdown in react

reactjs

bulma