Question

我建立一个React切换菜单，由一个按钮触发问题是这一次发生所以，如果我再次按下按钮，菜单仍然打开而不是关闭。我应该包括隐藏功能但不知道如何。任何人都可以告诉我应该改变什么？我在这个例子How to Build a Sliding Menu Using ReactJS

中使用了它

Import { Menu } from '../../components';

export default class ToggleMenu extends React.Component {

  showRight = () => {
    this.right.show();
  }


  constructor(props) {
    super(props);
    this.showRight = this.showRight.bind(this);
  }

  render() {

    return (
      <div>
      <button onClick={this.showRight}>Show Right Menu!</button>
      <Menu 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>
    );
  }
}

从'react'导入React;

export default class Menu extends React.Component {
    state = {
      visible: false,
    };

    show() {
      this.setState({ visible: true });
    }

    hide() {
      this.setState({ visible: false });
    }

    render() {
      const { visible } = this.state;

      return (
        <div className="menu">
          {
            visible &&
              <div className={this.props.alignment}>{this.props.children}</div>
          }
        </div>
      );
    }
}

Answer 1

通过将State移动到主ToggleMenu中，您可以让此组件保持菜单的可见性。

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>
        );
    }
}

这使我可以将菜单更改为无状态组件：

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

我在这里创建了一个webpackbin（现在有了动画）：https://www.webpackbin.com/bins/-Klh1VM-n4RDCkEbkK67

对于过渡和动画，我建议您查看https://github.com/reactjs/react-transition-group

Answer 2

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}

Answer 3

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>
    )
  }

}

Answer 4

将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()
    }

}）

ReactJs切换按钮以打开菜单

4 个答案: