Question

我已经搜索了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的状态，但是当点击该按钮时，它不会切换状态。

Answer 1

onClick由MenuButton组件处理，后者又调用作为属性传递的toggleMenu函数。我会将toggleMenu作为MenuButton的属性传递：

 <MenuButton toggleMenu={this.toggleMenu} />

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

1 个答案: