材料的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標籤：更改活動標籤的文本顏色

回答

相關問題