Реактивная вкладка компонента активной вкладки

Question

import React, { Component } from "react";


class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isActive: true
    };
    this.handleClickActiveTab = this.handleClickActiveTab.bind(this);
  }

  handleClickActiveTab() {
    this.setState({ isActive: false });
  }

  render() {
    const activeClass = this.state.isActive ? 'is-active' : '';
    return (
      <div styleName="page" className="container">
        <nav className="full-width-with-padding" styleName="nav-tabs-wrap">
          <ul styleName="nav-tabs">
            <li styleName={`nav-tabs__item ${activeClass}`}>
              <a styleName="nav-tabs__item-link" onClick={this.handleClickActiveTab}>
                My BQ
              </a>
            </li>
            <li styleName={`nav-tabs__item ${activeClass}`}>
              <a styleName="nav-tabs__item-link" onClick={this.handleClickActiveTab}>
                Subscriptions
              </a>
            </li>
            <li styleName={`nav-tabs__item ${activeClass}`}>
              <a styleName="nav-tabs__item-link" onClick={this.handleClickActiveTab}>
                Promotions
              </a>
            </li>
            <li styleName={`nav-tabs__item ${activeClass}`}>
              <a styleName="nav-tabs__item-link" onClick={this.handleClickActiveTab}>
                Contact
              </a>
            </li>
            <li styleName={`nav-tabs__item ${activeClass}`}>
              <a styleName="nav-tabs__item-link" onClick={this.handleClickActiveTab}>
                Bookmark
              </a>
            </li>
          </ul>
        </nav>
        <div />
      </div>
    );
  }
}

export default Page;

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

Answer 1

Если this.state.isActive равно true, activeClass равно is-active.Теперь в каждом из тегов <li> вы добавляете класс is-active, поэтому все вкладки активируются.

Вместо этого вы можете сохранить номер активной вкладки, как в Md.Warish's.ответьте и добавьте класс условно.

Answer 2

Вместо этого используйте логическое значение для активного состояния, используйте целое число для отслеживания текущей активной вкладки, как показано ниже:

...
constructor(props) {
  super(props);
  this.state = {
     activeTab: 1
  };
}
...

handleClickActiveTab(currentTab) {
 this.setState({ activeTab: currentTab });
}

А затем используйте текущий номер активной вкладки, чтобы установить активный стиль или имя класса для вашего компонента:

...
<li className={activeTab === 1 ? "active" : ""}>
  <a styleName="nav-tabs__item-link" onClick={this.handleClickActiveTab.bind(this, 1)}>My BQ</a>
</li>

...

Answer 3

import React, { Component } from "react";


class Page extends React.Component {
constructor(props) {
super(props);
this.state = {
  activeTab: 0,
};
this.handleClickActiveTab = this.handleClickActiveTab.bind(this);
}

handleClickActiveTab(e) {
  const newActiveTab = e.target.tab;
 this.setState({
  activeTab : newActiveTab,
})
}

render() {
  const activeClass ='is-active';
return (
  <div styleName="page" className="container">
    <nav className="full-width-with-padding" styleName="nav-tabs-wrap">
      <ul styleName="nav-tabs">
        <li styleName={`nav-tabs__item ${this.state.activeTab == 0 ? activeClass : 
          ''}`}>
          <a styleName="nav-tabs__item-link" data-tab="0" onClick= 
            {this.handleClickActiveTab}>
            My BQ
          </a>
        </li>
        <li styleName={`nav-tabs__item ${this.state.activeTab == 1 ? activeClass 
              : ''}`}>
          <a styleName="nav-tabs__item-link" data-tab="1" onClick= 
           {this.handleClickActiveTab}>
            Subscriptions
          </a>
        </li>
        <li styleName={`nav-tabs__item ${this.state.activeTab == 2 ? activeClass 
             : ''}`}>
          <a styleName="nav-tabs__item-link" data-tab="2" onClick= 
             {this.handleClickActiveTab}>
            Promotions
          </a>
        </li>
        <li styleName={`nav-tabs__item ${this.state.activeTab == 3 ? activeClass 
               : '' }`}>
          <a styleName="nav-tabs__item-link" data-tab="3" onClick= 
             {this.handleClickActiveTab}>
            Contact
          </a>
        </li>
        <li styleName={`nav-tabs__item ${this.state.activeTab == 4 ? activeClass 
        : '' }`}>
          <a styleName="nav-tabs__item-link" data-tab="4" onClick= 
             {this.handleClickActiveTab}>
            Bookmark
          </a>
        </li>
      </ul>
    </nav>
    <div />
  </div>
  );
}
}

 export default Page;