Question

我使用材料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

）

Answer 1

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

的形式

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

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

Answer 2

从今天的材料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>

Answer 3

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

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

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

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

Answer 4

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

<块引用>

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

并且根据 MUI Tab Doc 你必须在 value 中添加 <Tab> attr for

<块引用>

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

代码示例：

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

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

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

4 个答案: