在 Material UI 的 Tab 组件中将一个选项卡设置为活动状态

Question

我正在使用 Material UI 作为当前项目的必备库。一个页面需要四个选项卡，因此我正在使用来自 Material UI 库的选项卡组件。

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

从文档中，我看到了 Tab 的 "value" 属性。因此，我分别为每个选项卡设置了值 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

)

- RamAlx

Answer 1

如果您想默认选择不同的选项卡，请使用initialSelectedIndex。

对于较旧版本的Material 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

---

该属性在当前版本的https://material-ui.com/api/tabs/中不存在（即使链接已更改）。 - Fogus

修正了答案 @Fogus - cdoshi

Answer 2

截至今天的最新版本的Material UI（4.1），可以通过在Tabs中定义的value属性来设置默认活动选项卡。以下示例代码将默认打开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

Answer 3

根据MUI Tabs Doc，您需要在<Tabs>中添加value属性。

当前选定的Tab的值。如果您不想选择任何Tab，可以将此属性设置为false。

根据MUI Tab Doc，您需要在<Tab>中添加value属性。

您可以提供自己的值。否则，我们会回退到子位置索引。

代码示例：

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

在编程中，Tabs和Tab中的value必须是相同的类型。

- Masoud Aghaei

Answer 4

您可以使用状态来设置初始选项卡选择。

const [value, setValue] = React.useState(2);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

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

- Kowsigan Atsayam