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

Question

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

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

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

)

Answer 1

默认情况下，为了选择不同的选项卡，请使用 initialSelectedIndex。 它将是这样的形式

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

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

Answer 2

从今天最新版本的 Material UI ( 4.1 ) 开始，通过在Tabs定义的属性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文件必须添加value ATTR在<Tabs>为

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

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

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

代码示例：

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

Tabs和Tab value必须是同一类型