Как исправить баг с навигацией?

Question

[Владислав]

Есть компонент с навигацией, на котором при нажатии на линки изменяется цвет( добавляется .active ). Проблема в том, что если нажать на несколько пунктов навигации, то они все поменяют цвет, что мне сделать, чтобы при нажатии на другой пункт предыдущий загоревшийся пункт убрал .active?( я новичок в React не бейте)

Вот скрины, если я некорректно сформулировал вопрос:



Nav.jsx:

import React, {Component} from 'react';

import NavLink from './NavLink';

import '../css/main.css';
import $ from "jquery";

import logo from './img/logo.png';
class Nav extends Component{
    constructor(props){
        super();
    }
    menuClick(){
        $(this.refs.ClickItem).slideToggle(500)
    }
    render(){
    return(
    <nav>
        <a href="#" className="menu-trigger" onClick={()=>this.menuClick()}>Open menu</a>
        <div className="container">
            <div className="logo clearfix">
            <img src={logo} alt=""/>
        </div>
        <div className="nav__items">
            <ul ref="ClickItem">
                <li><NavLink href="#" >Home</NavLink></li>
                <li><NavLink href="#">About us</NavLink></li>
                <li><NavLink href="#">Shop</NavLink></li>
                <li><NavLink href="#">Contact us</NavLink></li>
            </ul>
        </div>
        </div>
    </nav>
    );
    }
}

export default Nav;

NavLink.jsx:

import React, {Component} from 'react';

class NavLink extends Component{
    constructor(props){
        super(props);
        this.state = {
            active: ''
        };
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick(){
            this.setState({active: 'true'});
    }
    render(){
    return(
        <a onClick={this.handleClick} className={`''${this.state.active ? ' active' : ''}`} href="href" {...this.props}>{this.props.children}</a>
    );
}
}
export default NavLink;

Answer 1

[0xD34F]

Перенесите active из NavLink в Nav (кстати, а что там после этого останется? - да ничего, кроме рендеринга a, которому прокидываются props без изменений; получается, что не так уж и нужен этот компонент, проще создавать этот a сразу в Nav), и хранить в нём индекс активного элемента:

state = {
  active: null,
  ...
}

setActive(active) {
  this.setState({ active });
}

{this.state.items.map((n, i) => (
  <li>
    <NavLink
      href="#"
      className={this.state.active === i ? 'active' : ''}
      onClick={() => this.setActive(i)}
    >
      {n}
    </NavLink>
  </li>
))}

Comments

[Владислав]

Спасибо!

Answer 2

[ой всё]

тогда вам надо начинать с CSS и Javascript
к реакту ваша проблема не имеет никакого отношения, даже тэг можете убрать

с предыдущими никто не возится, устанавливают основной цвет всем элементам, а потом меняют на активный у текущего

Comments

[Владислав]

ну так тоже самое и происходит, я добавляю при клике класс .active элементу, но при клике на другой ему тоже присваивается .active

[ой всё]

Vladislav, прочитайте внимательно мой комментарий выше и перепишите его для себя по отдельным шагам

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