在材質 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必須是同一類型