Reactjs 单击“切换”按钮打开菜单

我构建了一个

React

组件，

Toggle Menu

，它由一个按钮触发。首次打开后，我无法看到菜单打开/关闭。在如何着手解决此问题方面有点迷失。。。这是我用来参考的例子

export default class ToggleMenu扩展React.Component{
showRight=（）=>{
this.right.show（）；
}
建造师（道具）{
超级（道具）；
this.showRight=this.showRight.bind（this）；
}
render（）{
返回(
显示右菜单！
this.right=right}alignment=“right”>
首页
第二页
第三页
);
}
}
导出默认类菜单扩展了React.Component{
状态={
可见：假，
};
show（）{
this.setState（{visible:true}）；
}
隐藏（）{
this.setState（{visible:false}）；
}
render（）{
const{visible}=this.state；
返回(
{
可见的&&
{this.props.children}
}
);
}
}

将eventListener添加到按钮中

//Add ID to the button
<button id = "toggle"></button>

//Outside the render method
   document.getElementById('toggle').addEventListener('click', function(e){
    If(e.target.style.display="none") {
        this.right.show()
    } Else {
        this.right.hide()
    }

//向按钮添加ID
//在渲染方法之外
document.getElementById（'toggle'）。addEventListener（'click'，函数（e）{
If（如target.style.display=“无”）{
这个。对。show（）
}否则{
this.right.hide（）
}

---

})

通过将状态移动到主切换菜单，您可以让该组件保持菜单的可见性

class ToggleMenu extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            visible: false  
        };

        this.toggleMenu = this.toggleMenu.bind(this);
    }

    toggleMenu() {
        this.setState({visible: !this.state.visible})
    }

    render() {
        return (
            <div>
                <button onClick={this.toggleMenu}>Show Right Menu!</button>
                {this.state.visible && <Menu alignment="right">
                <MenuItem hash="first-page">First Page</MenuItem>
                <MenuItem hash="second-page">Second Page</MenuItem>
                <MenuItem hash="third-page">Third Page</MenuItem>
                </Menu>}
            </div>
        );
    }
}

类切换菜单扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
可见：假
};
this.toggleMenu=this.toggleMenu.bind（this）；
}
切换菜单（）{
this.setState（{visible:！this.state.visible}）
}
render（）{
返回(
显示右菜单！
{this.state.visible&&
首页
第二页
第三页
}
);
}
}

这允许我将菜单更改为无状态组件：

const Menu = ({alignment, children}) => (
    <div className="menu">
        <div className={alignment}>{children}</div>
    </div>
);

const菜单=（{alignment，children}）=>(
{儿童}
);

我在这里创建了一个webpackbin（现在带有动画）：

对于过渡和动画，我建议您查看导出默认类ToggleMenu extends React.Component{ 建造师（道具）{ 超级（道具）； this.state={rightMenu:false} this.showRight=this.showRight.bind（this）； } showRight=（）=>{ this.setState（{rightMenu:！this.state.rightMenu}） } render（）{ 返回( 显示右菜单！ this.right=right}alignment=“right”> 首页 第二页 第三页 ); } } //样式代码 .displayBlock{display:block} .displayNone{display:none}

类应用程序扩展了React.Component{
状态={
messageVisibility:true
}  
toggleMessage=（）=>{
这是我的国家({
messageVisibility:！this.state.messageVisibility
})
}
render（）{
返回(
切换消息
{this.state.messageVisibility？切换内容
：null}
)
}
}

我的菜单中已经有一个状态，我想处理这个问题，而你的解决方案不是那样的。你能告诉我如何设置菜单的动画吗。问题是菜单在单击后才呈现。简单的不透明度从0.1到1会很好，我花了一整天的时间来处理这个问题@用户2340824没有问题！我已经用一些转换更新了我的示例；）你太棒了，我昨天花了一整天的时间来制作这些东西的动画

const Menu = ({alignment, children}) => (
    <div className="menu">
        <div className={alignment}>{children}</div>
    </div>
);

export default class ToggleMenu extends React.Component {

  constructor(props) {
    super(props);
    this.state = { rightMenu: false }
    this.showRight = this.showRight.bind(this);
  }

  showRight = () => {
    this.setState({ rightMenu: !this.state.rightMenu })
  }

  render() {

    return (
      <div>
      <button onClick={this.showRight}>Show Right Menu!</button>
      <Menu className={ this.state.rightMenu ? "displayBlock" : "displayNone"} ref={right => this.right = right} alignment="right">
      <MenuItem hash="first-page">First Page</MenuItem>
      <MenuItem hash="second-page">Second Page</MenuItem>
      <MenuItem hash="third-page">Third Page</MenuItem>
      </Menu>
      </div>
    );
  }
}

//Style code
.displayBlock{ display: block }
.displayNone{ display: none} 

class App extends React.Component {
  state = {
    messageVisibility: true
  }  

  toggleMessage = () => {
    this.setState({
      messageVisibility: !this.state.messageVisibility
    })
  }

  render() {
    return(
      <div>           
        <button onClick={this.toggleMessage}>Toggle Message</button>
        {this.state.messageVisibility ? <p>Toggle Content</p> : null}        
      </div>
    )
  }

}