Javascript 反应选项卡组件活动选项卡 import React，{Component}来自“React”； 类页扩展了React.Component{ 建造师（道具）{ 超级（道具）； 此.state={ 是的 }; this.handleClickActiveTab=this.handleClickActiveTab.bind（this）； } handleClickActiveTab（）{ this.setState（{isActive:false}）； } render（）{ const activeClass=this.state.isActive？'s active'：''； 返回( 我的BQ 订阅 促销 接触 书签 ); } } 导出默认页面；

我无法在单击时应用活动类。它适用于所有选项卡。我只想把它放到点击的那一个。在第一次加载时，它应该位于第一个选项卡上。请有人帮帮我。我是新来的 我无法在单击时应用活动类。它适用于所有选项卡。我只想把它放到点击的那一个。在第一次加载时，它应该位于第一个选项卡上。请有人帮帮我。我不熟悉react

导入react，{Component}来自“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;

类页扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
活动选项卡：0，
};
this.handleClickActiveTab=this.handleClickActiveTab.bind（this）；
}
handleClickActiveTab（e）{
const newActiveTab=e.target.tab；
这是我的国家({
activeTab:newActiveTab，
})
}
render（）{
常量activeClass='is-active'；
返回(


我的BQ


订阅


促销


接触


书签


);
}
}
导出默认页面；

从“React”导入React，{Component}；
类页扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
活动选项卡：0，
};
this.handleClickActiveTab=this.handleClickActiveTab.bind（this）；
}
handleClickActiveTab（e）{
const newActiveTab=e.target.tab；
这是我的国家({
activeTab:newActiveTab，
})
}
render（）{
常量activeClass='is-active'；
返回(


我的BQ


订阅


促销


接触


书签


);
}
}
导出默认页面；

如果

此.state.isActive

为

真

，

活动类

为

活动

。现在，在每个

标记中，您添加了类

处于活动状态

——因此所有选项卡都处于活动状态

---

相反，您可以保存当前处于活动状态的选项卡的编号，如Md.Warish的答案所示，并有条件地添加类。

如果

此.state.isActive

为

true

，

activeClass

为

处于活动状态

。现在，在每个

标记中，您添加了类

处于活动状态

——因此所有选项卡都处于活动状态

---

相反，您可以保存当前活动选项卡的编号，如Md.Warish的答案所示，并有条件地添加类。

而是使用布尔值作为活动状态，使用整数跟踪当前活动选项卡，如下所示：

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;

然后使用当前活动选项卡编号为组件设置活动样式或类名：

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

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

。。。

我的BQ

---

…

而是使用布尔值作为活动状态，使用整数跟踪当前活动选项卡，如下所示：

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;

然后使用当前活动选项卡编号为组件设置活动样式或类名：

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

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

。。。

我的BQ

---

…

newActiveTab未定义更改为const newActiveTab=e.target.getAttribute（“数据选项卡”）；newActiveTab未定义更改为const newActiveTab=e.target.getAttribute（“数据选项卡”）；