时间戳

首页 > 解决方案 > 使用反应内联样式切换不同选项卡上的活动状态

reactjs - 使用反应内联样式切换不同选项卡上的活动状态

问题描述

我来自，jQuery所以我在理解如何解决这个问题时遇到了问题。

我正在用 React 编写一个应用程序并且我正在使用inline样式，即每个组件都有自己的样式，并且它们是JS用CSS.

现在，我有五个选项卡，我想.is-active在单击其中一个时切换一个。所以在点击时，我必须.is-active从旧类中删除，并将其添加到点击的类中。我不确定如何使用inline样式来解决这个问题，因为一切inline都没有实际的类可供我添加到我的选项卡中。

现在，当我渲染每个选项卡（我有一个单独的组件）时，我还传入一个isActive布尔值，它告诉组件在有或没有活动类的情况下进行渲染。代码示例：

HTML：

<Tab isActive={true} />
<Tab isActive={false} />

JS：

<div className="tab" style={(this.props.isActive !== true) ? style.tab : {...style.tab, ...style.active}}>

但是我完全不知道如何在onclick上执行此操作。我是否必须打破内联样式概念才能做到这一点，还是有一个聪明的解决方案？我在网上没有找到任何简单的东西。谢谢！

标签： reactjs

解决方案

您可以将状态用于此类实现。一个简短的实现如下：

  1. 假设你有两个标签。你应该constructor像这样定义状态：

    constructor(props){
  super(props)
  this.state = {
    tabs = [
      { tab1: { active: true } },
      { tab2: { active: false} }
    ]
  }
  this.tabToggle = this.tabToggle.bind(this)
}

  2. 将选项卡元素放入render()：

    render() {
  return (
    <div>
      { this.state.tabs.map((tab, index) => 
        <div className={'tab ' + tab.active ? 'active' : ''}>
             onClick={()=>this.tabToggle(index)}>
        </div>
      )}
    </div>
  )
}

  3. 像这样定义切换功能：

    tabToggle(tabIndex) {
  let tabs = this.state.tabs
  tabs[tabIndex] = true
  tabs.map((tab, index) => {
    if (index !== tabIndex) tab.active = false
  })
  this.setState( tabs )
}

部分代码的一些参考：

推荐阅读