在材料 ui 选项卡组件中将选项卡设置为活动

Question

我正在使用 Material UI 作为当前项目的强制性库。一个项目的页面需要四个选项卡，所以我使用的是材料 ui 库中的选项卡组件。

默认情况下，当我呈现包含选项卡的页面时，第一个选项卡是活动选项卡。我想将第四个选项卡设置为活动选项卡。

从文档中，我看到了选项卡的“ 值”道具。因此，我将四个选项卡的值分别设置为每个选项卡的 1、2、3 和 4。当导航到相应的屏幕时，我发送一个操作，将我商店中的属性选项卡值设置为 4。

然后虽然 mapStateToProps 我让我的组件可以访问这个属性。所以我进入页面时的值是四，但活动选项卡仍然是第一个。让我告诉你我的代码：

 const mapStateToProps = state => ({
   value: state.get('tabValue');
});

const mapDispatchToProps = dispatch => ({
 tabClicked: () => setActiveTab('tabValue', 4)
})

我的组件：

 const Tabs = ({ value }) => (
 <Tabs>
   <Tab value={1}></Tab>
   ....
   <Tab value={value}</Tab>
 </Tabs

)

原文由 user7334203 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

默认情况下，您可以使用 initialSelectedIndex 选择不同的选项卡。

对于旧版本的材料 ui，它将采用以下形式

<Tabs initialSelectedIndex={value}>
   <Tab value={1}></Tab>
   ...
  <Tab value={4}></Tab>
</Tabs>

对于较新的版本 >4

 <Tabs value={value}>
  <Tab label="Tab1" />
  <Tab label="Tab2" />
  <Tab label="Tab3" />
</Tabs>

检查 https://material-ui.com/components/tabs/

原文由 cdoshi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

从今天最新版本的 material UI ( 4.1 ) 开始，通过属性设置默认活动选项卡 value 定义在 Tabs 下面的示例代码默认打开 Tab 2 ：

 <Tabs value={1}>
        <Tab label="Tab 1"  {...a11yProps(0)} />
        <Tab  label="Tab 2" {...a11yProps(1)} />
 </Tabs>
  <TabPanel value={0} index={0}>
        Item One
  </TabPanel>
  <TabPanel value={1} index={1}>
        Item Two
  </TabPanel>

原文由 Binita Bharati 发布，翻译遵循 CC BY-SA 4.0 许可协议