2017-05-15 44 views
0

私は奇妙な問題があります - react-bootstrapという3つのタブがあり、それらはすべてロジックとして暗示されています。React-bootstrapタブ:DefaultActiveKeyは選択したタブの色の変化をロックします

ただし、実際にはタブ{1}で初期化されます。ただし、別のタブを選択すると、正しく初期化されてレンダリングされますが、選択したタブの「ビジュアル」グラフィックは変更されません。選択したタブではなく、最初のタブで太字になります。

ここでは、レンダリングされる箇所を切り取っています。私は間違ったことをしましたか?

 <div> 
      <Tab.Container id="tabs-with-dropdown" activeKey={store.key} onSelect={store.handleSelect} defaultActiveKey={1} > 
       <div> 
        <NavigationBar store={store} /> 
        <Tab.Content animation> 
         <Tab.Pane eventKey={1}> 
          <Panels /> 
         </Tab.Pane> 
         <Tab.Pane unmountOnExit={true} eventKey={2}> 
          <Settings /> 
         </Tab.Pane> 
         <Tab.Pane unmountOnExit={true} eventKey={3}> 
          <Users /> 
         </Tab.Pane> 
        </Tab.Content> 
       </div> 
      </Tab.Container> 
     </div> 

そして、あなたはタブがこのような何かを返すナビゲートすることができますナビゲーションバーのコンポーネント、:

<div className="navbar navbar-inverse navbar-fixed-top" role="navigation" 
        style={{background: "#264b6b"> 
        <div className="container-fluid"> 
         <div className="navbar-header"> 
          <div> 
           <Nav bsStyle="tabs" className="tabmenu" 
            style={{ 
             position: "absolute", 
             marginLeft: "14%", 
             color: "white", 
             backgroundColor: "#264b6b", 
             borderBottom: "none", 
             fontVariant: "small-caps", 
             fontFamily: "'Open Sans', sans-serif", 
             fontWeight: "400" 
            }}> 
            <NavItem eventKey={1}> 
             panels 
            </NavItem> 
            <NavItem eventKey={2}> 
             settings 
            </NavItem> 
            <NavItem eventKey={3}> 
             users 
            </NavItem> 
           </Nav> 
          </div> 
         </div> 
        </div> 
       </div> 

タブ{1}は奇妙であるスタイリングで、「アクティブ」のすべての時間としてマークされます。他のものは、反応構成要素に取り付けられレンダリングされる。これに対する明白な理由は何ですか?最近まで働いていましたが、古いコミットを元通りに復元しようとしましたが、ここでコード自体が実際に変更されたことはありません。

store.handleSelectの場合、これらのタブはアクティブなタブを問題なく1、2、または3に正しくマークします。

答えて

1

制御されたタブを使用しているため、制御されていないタブコンポーネントのみに使用されているため、defaultActiveKey = 1は不要です。 store.keyを必要なタブに設定して、タブを初期化する必要があります。

関連する問題