Как оптимально и правильно прописать функцию (ReactJS) для переключения табов?
Всем добрый день. Помогите пожалуйста прописать более оптимально функцию handleClick(), в классовом компоненте, для реализации переключения табов. В целом код рабочий, НО! после загрузки приложения ПЕРВЫЙ клик по любому элементу меню табов происходит без реакции (контент не меняется). При втором и последующих нажатиях - все ок, работает как надо. Так что вопрос, если более конкретно, - как убрать "бездействия" первого клика по элементу меню (чтобы код работал сразу на первом клике)? В Реакте я новичок, понимаю что код далек от совершенства философии его. Буду благодарен за помощь!
class Dashboard extends React.Component {
...
handleClick() {
let tabsDashNav = document.querySelectorAll('.tab-dash');
let tabsDashContent = document.querySelectorAll('.tab-dash-content');
for (let i = 0; i < tabsDashNav.length; i++) {
tabsDashNav[i].addEventListener('click', (event) => {
event.preventDefault();
let activeDashAttr = event.target.getAttribute('data-dash');
for (let j = 0; j < tabsDashNav.length; j++) {
let contentDashAttr =
tabsDashContent[j].getAttribute('data-dash-content');
if (activeDashAttr === contentDashAttr) {
tabsDashNav[j].classList.add('active');
tabsDashContent[j].classList.add('active');
} else {
tabsDashNav[j].classList.remove('active');
tabsDashContent[j].classList.remove('active');
}
}
});
}
}
render() {
return (
...
// Контент табов
<ul className='list'>
<li className = 'content'>
<div data-dash-content="1990" class="tab-dash-content active">
...
</div>
</li>
<li className = 'content'>
<div data-dash-content="1995" class="tab-dash-content">
...
</div>
</li>
</ul>
// Навигация табов
<ul className = 'tabs-dash'>
<li className = 'active tab-dash'
data-dash = '1990'
onClick = { this.handleClick } >1990
</li>
<li className = 'tab-dash'
data-dash = '1995'
onClick = { this.handleClick } >1995
</li>
</ul>
...
)
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>