Реактивное меню состояния активного стиля Navbar Link ReactJs - PullRequest
Новая
       20

Реактивное меню состояния активного стиля Navbar Link ReactJs

0 голосов
/ 24 сентября 2019

Как я могу сделать при нажатии на конкретный пункт меню для перехода к компоненту в https://codepen.io/mrhamburger/pen/XzjXGb.

Я использовал подобный пример, но я мало что изменил, потому что я использую ссылку, импортированную из NextJs, но проблемаСсылка и активный стиль не связаны, моя проблема в том, что у меня есть menuItems как состояние, и я хочу, чтобы активное состояние выделило конкретную активную часть дизайна (menu-item - active), когда я нажимаю на блок или элемент div, содержащийссылка. 


import React, { Component } from 'react';
import Link from 'next/link';

// import  MenuItem  from './MenuItem';

import '../style.scss';


  class Sidebar extends React.Component {
    constructor(props) {
      super(props)

      this.state = {
        activeItem: '',
        activeItemPosition: 0,
        activeItemColor: '',
        menuItems: [
          { text: 'ComponentA' },
          { text: 'ComponentB' },
          { text: 'ComponentC' },
          { text: 'ComponentD' },
          { text: 'ComponentE' }
        ],
      }

      this.handleClick = this.handleClick.bind(this)
    }



    handleClick(activeItem) {
      return e => {
        e.preventDefault()

        this.setState({
          activeItem,
          activeItemPosition: document.getElementById(activeItem).offsetTop,
          activeItemColor: window.getComputedStyle(document.getElementById(activeItem)).getPropertyValue('background-color'),
        })


      }
    }

    render() {
      const menuItems = this.state.menuItems.map(item => <MenuItem item={ item } handleClick={ this.handleClick }/>)

      return (
        <div className='menu-container'>
          <span className='menu-item--active' style={{ top: this.state.activeItemPosition, backgroundColor: this.state.activeItemColor }} />


          <div id="ComponentA" className="menu-item" onClick={ this.handleClick('ComponentA') } >
            <Link  href="/ComponentA" >
                ComponentA
            </Link>
          </div>

          <div id="ComponentB" className="menu-item" onClick={ this.handleClick('ComponentB') }>
            <Link  href="/ComponentB">
               ComponentB
            </Link></div>
          <div id="ComponentC" className="menu-item" onClick={ this.handleClick('ComponentC') } >
            <Link  href="/ComponentC">
                ComponentC
            </Link>
          </div>
          <div id="ComponentD" className="menu-item" onClick={ this.handleClick('ComponentD') }>
            <Link  href="/ComponentD">
                ComponentD
            </Link></div>
          <div id="ComponentE"  className="menu-item" onClick={ this.handleClick('ComponentE') } >
            <Link  href="/ComponentE">
                ComponentE
            </Link>
          </div>




          {/* { menuItems }    */}


                 </div>
      )  
    }
  }

  function MenuItem(props) {
    return (  
              <div>

              </div>


    )
  }

  export default Sidebar;

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

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

Заранее спасибо.

...