时间戳

首页 > 解决方案 > 在 ReactJS 中添加一个类并从另一个类中删除类

reactjs - 在 ReactJS 中添加一个类并从另一个类中删除类

问题描述

我想使用 ul 和 li 创建一个选项卡，该选项卡将显示相同的内容，该内容被选中，应该显示一个按钮，该按钮将我发送到下一个选项卡，该按钮将激活以指示向我显示哪个选项卡

render() {
    return (
      <div>

        <ul>
          <li><a href="#tab-menu-1" className="active">Tab 1</a></li>
          <li><a href="#tab-menu-2">Tab 2</a></li>
          <li><a href="#tab-menu-3">Tab 3</a></li>
        </ul>
        <div id="tab-menu-1">Tab 1 Content <button>Move to Tab 2</button></div>

        //in default it should show the tab 1 content only and When i Press this button on above Div it should be moved to next tab and the class name will be transfer to the tab 2 on <li>

        <div id="tab-menu-2">Tab 2 Content <button>Move to Tab 2</button></div>

        //in default it should show the tab 2 content only and When i Press this button on above Div it should be moved to next tab and the class name will be transfer to the tab 3 on <li>

        <div id="tab-menu-3">Tab 3 Content <button>Move to Tab 2</button></div>

        //in default it should show the tab 3 content only and When i Press this button on above Div it should be moved to next tab and the class name will be transfer to the tab 1 on <li>

      </div>
    );
  }

标签： reactjs

解决方案

您可以将 activeIndex id 保存在组件的状态上，并有条件地呈现 className。

class Demo extends React.Component {

  state = {
    activeIdx: 0
  };

  render() {
    return (
      <div>

        <ul>
          <li><a href="#tab-menu-1" className={this.state.activeIdx === 0 ? 'active' : ''} data-index={0} onClick={this.handleChange}>Tab 1</a>
          </li>
          <li><a href="#tab-menu-2" className={this.state.activeIdx === 1 ? 'active' : ''} data-index={0} onClick={this.handleChange}>Tab 2</a></li>
          <li><a href="#tab-menu-3" className={this.state.activeIdx === 2 ? 'active' : ''} data-index={0} onClick={this.handleChange}>Tab 3</a></li>
        </ul>
        <div id="tab-menu-1">Tab 1 Content <button>Move to Tab 2</button></div>

        <div id="tab-menu-2">Tab 2 Content <button>Move to Tab 2</button></div>

        <div id="tab-menu-3">Tab 3 Content <button>Move to Tab 2</button></div>

      </div>
    );
  }

  handleChange = (evnt) => {
    this.setState({activeIdx: evnt.target.data.index});
  } 
}

更好的方法是从数组中生成项目列表。

class Demo extends React.Component {
  state = {
    activeIdx: 0,
    list: ["content 1", "content 2", "content 3"]
  };

  render() {
    return (
      <div>
        <ul>
          {this.state.list.map((item, index) => (
            <li key={item}>
              <a
                href={`#tab-menu-${index + 1}`}
                className={this.state.activeIdx === index && "active"}
                data-index={index}
                onClick={this.handleChange}
              >
                Tab {index + 1}
              </a>
            </li>
          ))}
        </ul>
        {this.state.list.map((item, index) => (
          <div id={`tab-menu-${index + 1}`} key={item}>
            {item}
            <button>Move to Tab {index + 2}</button>
          </div>
        ))}
      </div>
    );
  }

  handleChange = evnt => {
    this.setState({ activeIdx: evnt.target.data.index });
  };
}

推荐阅读