反應漢堡菜單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，但您可以將其添加到需要以類似方式知道活動狀態的其他子組件。