javascript - react 汉堡菜单onclick

我有一个Nav.js组件，并使用http://bokuweb.github.io/re-bulma/#NavToggle进行样式设置。

我正在尝试做到这一点，所以当您单击<NavToggle/>组件随附的汉堡菜单时，我可以将props设置为isActive并显示菜单。

这是我当前的Nav.js代码：

import React from 'react';
import { Link } from 'react-router';
import { prefixLink } from 'gatsby-helpers';



import { Nav, NavGroup, NavItem, NavToggle, Icon } from 're-bulma';



export default class nav extends React.Component {
  static propTypes = {
    name: React.PropTypes.string,
  };

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

  showToggleNav() {
    this.props.isActive
  }



  render() {
    return (
      <div>
        <Nav>
          <NavGroup align="left">
            <NavItem>
              <Link to={prefixLink('/')}>
              <h2>Dillon Raphael</h2>
              </Link>
            </NavItem>
          </NavGroup>

          <NavToggle onClick={this.showToggleNav} />

          <NavGroup align="right" isMenu>
            <NavItem>
            </NavItem>
            <NavItem>
            </NavItem>
            <NavItem>
              <a href="#" onClick={this.props.showModal}>Let's Work!</a>
            </NavItem>
          </NavGroup>
        </Nav>



      </div>
    );
  }
}

是的，我正在使用盖茨比。我喜欢它。它正在帮助我学习React。

最佳答案

因此，您需要该组件来了解导航是否处于活动状态，您需要能够将该状态从一个状态更改为另一个状态，并且需要将该信息从该组件传递给其子级。这将是使用component state的好地方。

我看到您正在尝试使用此函数设置isActive变量：

  showToggleNav() {
    this.props.isActive
  }

由于以下几个原因，此方法不起作用：


Props are read-only并且无法修改。
该函数实际上不执行任何操作-它只是在调用isActive道具时对其进行访问，而对其不执行任何操作。


因此，您需要在这里使用状态而不是道具，并更新您的函数以实际修改组件状态的值。

更新构造函数以将本地状态添加到组件：

  constructor(props) {
    super(props);
    this.showToggleNav = this.showToggleNav.bind(this);
    this.state = {
        isActive: false
    };
  }

使用称为setState的React组件函数更新函数以设置其调用状态：

  showToggleNav() {
     this.setState({ isActive: true });
  }

更新渲染方法以通过子组件的道具通知子组件导航处于活动状态：

  render() {
    return (
      <div>
        <Nav>
          <NavGroup align="left">
            <NavItem>
              <Link to={prefixLink('/')}>
                <h2>Dillon Raphael</h2>
              </Link>
            </NavItem>
          </NavGroup>

          <NavToggle isActive={this.state.isActive} onClick={this.showToggleNav} />

          <NavGroup align="right" isMenu>
            <NavItem>
            </NavItem>
            <NavItem>
            </NavItem>
            <NavItem>
              <a href="#" onClick={this.props.showModal}>Let's Work!</a>
            </NavItem>
          </NavGroup>
        </Nav>



      </div>
    );
  }

在这里，我已将其传递给NavToggle，但您可以将其添加到其他需要以类似方式知道活动状态的子组件中。