材料的UI标签：更改活动标签的文本颜色

我有以下对象：材料的UI标签：更改活动标签的文本颜色

const tabStyle = { 
    default_tab:{ 
     color: '#68C222', 
     width: '33.3%', 
     backgroundColor: '#FFFFFF', 
     fontSize: 15 
    }, 
    active_tab:{ 
     color: grey700, 
     width: '33.3%', 
     backgroundColor: '#FFFFFF', 
     fontSize: 15 
    } 
};

当点击一个标签，我希望能够使用active_tab设置。基本上我希望它对Tab标签文本使用相同的颜色，因为它具有inkBarStyle背景颜色（所选标签指示器的颜色）。

<Tabs tabItemContainerStyle={{backgroundColor: '#FFFFFF', width: '30%'}} inkBarStyle={{backgroundColor: '#68C222', width: '33.3%'}} > 
       <Tab style={tabStyle.active_tab} label='Tab1' > 
       </Tab> 
       <Tab style={tabStyle.default_tab} label='Tab2' > 
       </Tab> 
       <Tab style={tabStyle.default_tab} label='Tab3' > 
       </Tab> 
      </Tabs>

有一个onChange财产上Tabs和TabonActive属性，我或许可以使用，但我不知道如何去做。

来源

2017-10-13 Alex Cauthen

将您的活动标签索引存储在onChange事件处理程序<Tabs />的状态中。然后，你<Tab />组件，您可以在style道具做一个条件：

handleTabChange (index) { 
    this.setState({ 
     activeIndex: index 
    }); 
} 

getStyle (isActive) { 
    return isActive ? tabStyle.active_tab : tabStyle.default_tab 
} 

render() { 
    const { activeIndex } = this.state; 
    return (
     <Tabs onChange={this.handleTabChange}> 
      <Tab style={ this.getStyle(activeIndex === 1) } label='Tab1' ></Tab> 
      <Tab style={ this.getStyle(activeIndex === 2) } label='Tab2' ></Tab> 
      <Tab style={ this.getStyle(activeIndex === 3) } label='Tab3' ></Tab> 
     </Tabs> 
    ) 
}

来源

2017-10-13 20:46:40

收到以下错误：'警告：的setState（... ）：在现有状态转换期间无法更新（例如在渲染或其他组件的构造函数中）。渲染方法应该是道具和状态的纯粹功能;构造函数的副作用是一种反模式，但可以移动到componentWillMount.'可能做到我们在样式中调用该函数的事实。编辑：解决我的问题。谢谢 –

很高兴你的工作！ –

如果组件不是类成分呢，你有，因为你需要保持状态升级。

constructor() { 
     super() 
     this.state = { 
      clickedTabs: [] 
     } 
}

做的时候标签是将更新状态的方法点击

onTabClick = tagLabel => { 
     this.setState((prevState, tagLabel) => { 
      return prevState.tagLabel.push[tagLabel}; 
     }); 
    }

然后渲染Tab

render() { 
return (
     <Tab 
     style={this.state.clickedTabs.find('Tab1') ? 
      'tabStyle.active_tab' : 
      'tabStyle.default_tab' } 
     onClick={this.onTabClick('Tab1')} 
     label='Tab1' /> 
); 
}

来源

2017-10-13 20:50:35

材料的UI标签：更改活动标签的文本颜色

回答

相关问题