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

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;

Answer 2

如果this.state.isActive是true，则activeClass是is-active。现在，在每个<li>标记中，您要添加类is-active，以便激活所有选项卡。

相反，您可以像Warish的回答中那样保存当前活动的选项卡的编号，并有条件地添加类。

Answer 3

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

...
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>

...

反应选项卡组件活动选项卡

3 个答案: