反应-隐藏菜单onClick

Question

我仍然是一个反应初学者，我试图创建一个隐藏的菜单，当您单击按钮时该菜单会向上滑动，这是我的工作：

import React from "react";
import {render} from "react-dom";
import styles from "./MenuCocktails.css";
import {BottomMenu} from "./BottomMenu";

export class BottomMenuButton extends React.Component{
 constructor(){
      super();
      this.state ={
      shown: false
    };

  }
toggleMenu(){
    this.setState({shown: !this.state.shown});
}
render(){
     return(
       <div><button onClick={this.toggleMenu.bind(this)} >My Cart</button>

          if(this.state.shown == true) {
                <BottomMenu/>
          }
          else{
             <p>Nothing to see</p>
           }

       </div>
    );
   }
  }

任何帮助是极大的赞赏

Answer 1

您需要在构造函数中绑定toggleMenu ：

 constructor(){
      super();
      this.state = {
         shown: false
      };
      this.toggleMenu = this.toggleMenu.bind(this);
  }

您可以将条件逻辑更改为单线：

{this.state.shown ? <BottomMenu /> : <p>Nothing to see</p>}

你有什么问题？ 什么不起作用？ 你得到什么错误？