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

Posted 2021-04-21

我正在使用材料ui作为当前项目的强制库。项目页面需要四个选项卡，因此我使用了材料ui库中的选项卡组件。

当我在默认情况下渲染包含选项卡的页面时，第一个选项卡是活动选项卡。我想将第四个标签设置为活动状态。

从文档中，我看到了Tab的“价值”支柱。所以我将四个标签的值分别设置为1,2,3和4。当Inavigate到相应的屏幕时，我发送一个动作，它在我的商店中设置属性选项卡值为4。

然后，虽然mapStateToProps我使我的组件可以访问此属性。因此，当我进入页面时的值是四，但仍然是活动的Tab是第一个。让我告诉你我的代码：

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

)

答案

默认情况下，您可以使用initialSelectedIndex选择其他选项卡。它将是形式

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

检查http://www.material-ui.com/#/components/tabs