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

时间:2017-12-18 09:42:45

标签: javascript reactjs tabs material-ui

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

4 个答案:

答案 0 :(得分:1)

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

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

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

答案 1 :(得分:0)

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

答案 2 :(得分:0)

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

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

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

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

答案 3 :(得分:-1)

根据 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>
)

valueTabs 中的 Tab 必须属于同一类型