javascript - React tabs component active tab - Stack Overflow

admin管理员组

文章数量:1392095

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;

I am not able to apply active class on click. It is applying to all tabs. i just want that to the clicked one. and on first load it should be on first tab. Please someone help me. I am new to react I am not able to apply active class on click. It is applying to all tabs. i just want that to the clicked one. and on first load it should be on first tab. Please someone help me. I am new to react

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;

I am not able to apply active class on click. It is applying to all tabs. i just want that to the clicked one. and on first load it should be on first tab. Please someone help me. I am new to react I am not able to apply active class on click. It is applying to all tabs. i just want that to the clicked one. and on first load it should be on first tab. Please someone help me. I am new to react

• javascript
• reactjs
• tabs

Share Improve this question Follow edited Oct 4, 2018 at 10:50 Aliaksandr Sushkevich 12.5k88 gold badges4141 silver badges4646 bronze badges asked Oct 4, 2018 at 9:45 Sooraj BalaSooraj Bala 5911 gold badge33 silver badges77 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

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;

If this.state.isActive is true, activeClass is is-active. Now in each of <li> tags, you're adding the class is-active -- so all tabs are activated.

Instead you can save the number of the tab that is currently active as in Md.Warish's answer and add the class conditionally.

Instead using a boolean for active state, using integer to track the currently active tab like below:

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

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

And then using the current active tab number to set the active style or classname to your ponent:

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

...

本文标签： javascriptReact tabs component active tabStack Overflow