材料タブでタブをアクティブに設定します。

Question

私は現在の プロジェクトの必須ライブラリとして材料uiを使用しています。プロジェクトのページには4つのタブが必要なので、私は材料UIライブラリからタブコンポーネントを使用しています。

デフォルトでタブを含むページをレンダリングすると、最初のタブがアクティブなタブになります。 4番目のタブをアクティブに設定します。

ドキュメントからは、「値」のタブが表示されています。だから私は4つのタブの値をそれぞれ1,2,3,4に設定した。それぞれの画面に移動すると、プロパティのタブ値が4に設定されたアクションをディスパッチします。

しかし、mapStateToPropsでは、このプロパティを自分のコンポーネントにアクセス可能にしました。したがって、私がページに入るときの値は4ですが、それでもアクティブなタブが最初のものです。私はあなたに私のコードをお見せしましょう：

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