반응 햄버거 메뉴 onclick

Question

나는 Nav.js 구성 요소를 가지고 있으며 스타일링을 위해 http://bokuweb.github.io/re-bulma/#NavToggle을 사용합니다.

<NavToggle/> 구성 요소와 함께 제공되는 햄버거 메뉴를 클릭하면 isActive로 설정하고 메뉴를 표시 할 수 있도록하려고합니다.

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> 
    ); 
    } 
} 

그래, 내가 사용 개츠비 :

이 내 현재 Nav.js 코드입니다. 나는 그것을 좋아한다. 그것은 내가 React를 배울 수 있도록 도와줍니다.

Answer 1

따라서이 구성 요소는 탐색이 활성 상태인지, 해당 상태를 다른 상태로 변경할 수 있어야하는지,이 구성 요소의 정보를 해당 구성 요소로 전달해야하는지 어린이. 이것은 component state을 사용할 수있는 좋은 장소입니다.

1. Props are read-only과 수 없습니다 :

   showToggleNav() { 
       this.props.isActive 
       } 
   

   이것은 몇 가지 이유에 대해 작동하지 않습니다 :

   난 당신이 여기에이 기능을 사용하여이 isActive 변수를 설정하려는 것을 볼 수정할 수 있습니다.

2. 이 함수는 실제로 아무 것도 수행하지 않습니다.이 함수는 호출 될 때 isActive 소품에 액세스하기 만하며 아무 것도하지 않습니다.

그럼, 당신이 여기에서 할 필요가 실제로 구성 요소의 상태의 값을 변경할 수 있도록 기능을 소품 대신 상태를 사용하고 업데이트 할 수 있습니다. 라는 반작용 구성 요소의 기능 setState 사용

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

업데이트이 호출 할 때의 상태를 설정하는 함수 :

업데이트 생성자는 구성 요소에 로컬 상태를 추가하는

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

업데이트하여 render 메서드를 호출하여 해당 하위 항목을 통해 해당 하위 항목이 활성 상태임을 알립니다.

여기에 NavToggle을 전달했지만 비슷한 방식으로 활성 상태를 알아야하는 다른 하위 구성 요소에 추가 할 수 있습니다.