@R-o-n-d-o

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

Всем добрый вечер, не судите строго, только начинаю постигать азы веб-разработки, хочу узнать в чем причина моих бед, и верен ли путь которым я пошел) А беда такая:
Изучая React Js решил для практики слепить небольшое одностраничное приложение(SPA) с несколькими вкладками и меняющимися заголовки, во вкладках на данный момент условно разный контент(текст) заголовки (title) забираются от родительского компонента через props'ы. Теперь к вопросу, необходимо при нажатии на вкладку(Tab1) давать ей новый className и с помощью стилей выделять в активную, а при нажатии на другую вкладку необходимо возвращать предидущий стиль вкладке (Tab1), а вкладке (Tab2) давать "активный " стиль, на данном моменте при нажатии на вкладку новый стиль применяется но при нажатии на следующую вкладку он не стирается и получается что все нажатые вкладки являются активными:

import React, {Component} from 'react';

class Tab extends Component{
constructor(props){
super(props);
this.state={
title: this.props.title,
className:'tab-Cont'
};
this.handleClick=this.handleClick.bind(this)
};
handleClick(){
this.setState(prevState=>{
return{
className:prevState.className='activeTab'
}
})

console.log(this.state.className)
};
render(){
return(

{this.props.children}

);
};
};
export default Tab;

Готов к плохим словам в свой адрес, но на данный момент для меня это серьезный вопрос))
  • Вопрос задан
  • 16 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы