反应汉堡菜单onclick

Question

我有一个Nav.js组件和使用http://bokuweb.github.io/re-bulma/#NavToggle造型。

我试图做到这一点，所以当您点击与<NavToggle/>组件配套的汉堡包菜单时，我可以将道具设置为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。

Answer 1

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

我看到你想设置isActive变量，这个功能在这里：

1. Props are read-only并不能：

   showToggleNav() { 
       this.props.isActive 
       } 
   

   这不是一对夫妇的原因工作被修改。

2. 这个函数实际上并没有做任何事情 - 它只是在被调用时访问isActive，并且不会对它做任何事情。

所以，你需要做的是用状态，而不是道具，并更新功能，以实际修改组件的状态的值。

更新你的构造函数中添加本地状态到组件：

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

更新您的功能设置状态时，它被称为，用setState称为阵营组件功能：

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，但您可以将其添加到需要以类似方式知道活动状态的其他子组件。