Question

我有以下对象：

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和[{1}}属性上有一个onActive属性我可以使用，但我不知道如何去做。

Answer 1

将活动标签索引存储在onChange的{{1}}事件处理程序中。然后，对于<Tabs />组件，您可以在<Tab />道具中执行条件：

style

Answer 2

如果您的组件还不是类组件，则必须升级它，因为您需要保持状态。

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' /> 
  );
}

Answer 3

我用一个简单的条件语句解决了

 <Tabs value={value} onChange={this.handleChange}>
   <LinkTab style={{ textTransform: "none", fontSize: 16, fontWeight: value === 0 ? "bold" : "" }} ... />
   <LinkTab style={{ textTransform: "none", fontSize: 16, fontWeight: value === 1 ? "bold" : "" }} ... />
</Tabs>

Material-UI选项卡：更改活动选项卡文本颜色

3 个答案: