如何在 React 中按下按钮来切换元素？答案

【问题标题】：How to toggle elements with a button press in React?如何在 React 中按下按钮来切换元素？
【发布时间】：2018-01-14 01:58:31
【问题描述】：

我已经搜索了 3 天，以了解如何切换我的移动导航按钮来切换我的移动菜单。我是 React 新手，可以使用 jQuery 轻松完成此操作，但我不想使用 jQuery。我逐行复制了一个关于如何显示或隐藏元素的示例。我无法让它工作。任何帮助将非常感激。我正在使用带有 React 的样式组件。

按钮子组件：

import React, { Component } from 'react';

class MenuButton extends Component {
  render() {
    return (
      <Button onClick={this.props.toggleMenu}>
        <Menu></Menu>
      </Button>
    )
  }
}

export default MenuButton;

菜单子组件：

import React, { Component } from 'react';

import { Link } from 'react-router-dom';

class Menu extends Component {
  render() {
    return (
      <OffCanvasMenu>
        <Title>Menu</Title>
        <Nav>
          <NavLinks><Link to='/'>Home</Link></NavLinks>
          <NavLinks><Link to='/about'>About</Link></NavLinks>
          <NavLinks><Link to='/interactive'>Interactive</Link></NavLinks>
          <NavLinks><Link to='/ideas'>Ideas</Link></NavLinks>
          <NavLinks><Link to='/contact'>Contact</Link></NavLinks>
        </Nav>
      </OffCanvasMenu>
    )
  }
}

export default Menu;

具有所有状态的菜单容器组件：

import React, { Component } from 'react';

import Menu from './Menu';
import MenuButton from './MenuButton';

class MenuContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      active: false
    }
    this.toggleMenu = this.toggleMenu.bind(this);
  }

  toggleMenu() {
    const { active } = this.state;
    this.setState({
      //toggle value of `active`
      active: !active
    });
  }

  render() {
    return (
      <div>
        <MenuButton onClick={this.toggleMenu}/>
        {this.state.active && <Menu/>}
      </div>
    )
  }
}

export default MenuContainer;

我可以在 ReactDev 工具中看到一个复选框，显示 MenuContainer 具有状态，但是当单击该按钮时，它不会切换状态。

【问题讨论】：

标签： javascript reactjs styled-components

【解决方案1】：

onClick 由MenuButton 组件处理，该组件反过来调用作为属性传递的toggleMenu 函数。我会将toggleMenu 作为MenuButton 的属性传递：

 <MenuButton toggleMenu={this.toggleMenu} />

【讨论】：