Блог

У меня есть 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>
    );
  }
}
  

Да, я использую Gatsby. Мне это нравится. Это помогает мне изучить React.

Итак, вам нужно, чтобы этот компонент знал, активна навигация или нет, вам нужно иметь возможность изменять этот статус с одного на другой, и вам нужно передать эту информацию из этого компонента его дочерним элементам. Это было бы отличным местом для использования состояния компонента.

Я вижу, что вы пытаетесь установить переменную isActive с помощью этой функции здесь:

   showToggleNav() {
    this.props.isActive
  }
  

Это не работает по нескольким причинам:

1. Реквизиты доступны только для чтения и не могут быть изменены.
2. На самом деле эта функция ничего не делает — она просто обращается к isActive prop при его вызове и ничего с ним не делает.

Итак, что вам нужно сделать здесь, это использовать state вместо props и обновить вашу функцию, чтобы фактически изменить значение состояния компонента.

Обновите свой конструктор, чтобы добавить компоненту локальное состояние:

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

Обновите свою функцию, чтобы установить состояние при ее вызове, используя функцию компонента React, вызываемую 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, но вы можете просто добавить его к другим дочерним компонентам, которым необходимо знать активное состояние аналогичным образом.