tabs bug 修改

src/components/detail/outline/index.js

@@ -11,7 +11,8 @@ class OutLine extends Component {
     constructor(props) {
         super(props)
         this.state = {
-            stageInfo: []
+            stageInfo: [],
+            tab: 0,
         }
     }
 
@@ -44,8 +45,10 @@ class OutLine extends Component {
         })
     }
 
-    change = (index) => {
-        console.log(index);
+    changeTab = (tab, index) => {
+        this.setState({
+            tab: index
+        })
     }
 
     render() {
@@ -61,28 +64,28 @@ class OutLine extends Component {
             <div className='course-detail'>
                 <WhiteSpace/>
                 <StickyContainer>
-                    <div className='detail_tab'>
-                        {
-                            tabs.map((item, index) => {
-                                return <div onClick={e => change(index)} className="tabItem" key={index}>
-                                    <span>{item.title}</span>
-                                </div>
-                            })
-                        }
-                    </div>
                     <Tabs tabs={tabs}
                           initialPage={0}
                           swipeable={false}
+                          onTabClick={(tab, index) => this.changeTab(tab, index)}
                           // renderTabBar={RenderTabBar}
                     >
+                    </Tabs>
+
                     {/*介绍*/}
+                    {
+                        this.state.tab === 0 ? (
                             <div className='introduce'>
                                 <p>讲师：{introduce.teachers}</p>
                                 <p>课时：{introduce.course_hour}</p>
                                 <p>时间：{introduce.start_time}</p>
                                 <div className='dec' dangerouslySetInnerHTML={{__html: this.htmlDecode(introduce.intro)}}></div>
                             </div>
+                        ) : null
+                    }
                     {/*大纲*/}
+                    {
+                        this.state.tab === 1 ? (
                             <div className='outline'>
                                 {
                                     this.state.stageInfo && this.state.stageInfo.length > 0 && this.state.stageInfo.map((item, index) => {
@@ -214,7 +217,8 @@ class OutLine extends Component {
                                     })
                                 }
                             </div>
-                    </Tabs>
+                        ) : null
+                    }
                 </StickyContainer>
                 <WhiteSpace/>
             </div>

src/components/detail/outline/index.scss

@@ -185,25 +185,4 @@
       background-color: $bg_FE2F2F;
     }
   }
-
-  .detail_tab {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    height: 46px;
-    .tabItem {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 50%;
-
-      span {
-        display: inline-block;
-        height: 100%;
-        border-bottom: 1px solid #09f;
-        padding: 6px 0;
-      }
-    }
-  }
 }