在材质 ui 选项卡组件中将选项卡设置为活动状态答案

【问题标题】：Set a tab as active in material ui tab component在材质 ui 选项卡组件中将选项卡设置为活动状态
【发布时间】：2017-12-18 09:42:45
【问题描述】：

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

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

从文档中，我看到了 Tab 的“value”属性。因此，我将每个选项卡的四个选项卡的值分别设置为 1、2、3 和 4。当导航到相应的屏幕时，我调度了一个操作，该操作在我的商店中将属性选项卡值设置为 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

)

【问题讨论】：

标签： javascript reactjs tabs material-ui

【解决方案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/

【讨论】：

当前版本不存在该属性material-ui.com/api/tabs（连链接都改了）
修复了@Fogus 的答案

【解决方案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>

【讨论】：

【解决方案3】：

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

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

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

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

【讨论】：

【解决方案4】：

根据MUI Tabs Doc，您必须在<Tabs> 中添加value attr for

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

根据MUI Tab Doc，您必须在<Tab> 中添加value attr

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

代码示例：

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

Tabs 中的 value 和 Tab 必须属于同一类型

【讨论】：