react 標(biāo)簽頁tabs

實現(xiàn)原理：定義一個公共的數(shù)組 定義點擊事件 使用map 遍歷數(shù)組

以下形式的數(shù)組：鍵名可自己取。
要定義一個唯一值而且必須是字符串類型，作用是給遍歷的標(biāo)簽綁定唯一的key值
const panes = [
      { title: 'Tab 1', content: 'Content of Tab Pane 1', key: '1' },
      { title: 'Tab 2', content: 'Content of Tab Pane 2', key: '2' },
    ];


遍歷數(shù)組，
注：TabPane 的key屬性的值必須是字符串
 {this.state.panes.map(pane => (
            <TabPane tab={pane.title} key={pane.key}>
              {pane.content}
            </TabPane>
          ))}

addTabs組件

import React from 'react'
import {Button} from "antd";
import {observer} from 'mobx-react'
import tabsStore from "../../store/TabsStore";  //引入狀態(tài)管理文件 局部引入
import emitter from '../../util/event'   //引入 event   作用：主要實現(xiàn)兄弟之間傳值
@observer
class AddTabs extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      panes:tabsStore.getPane().panes, //初始 tabs
    };
  }
  add = (/*可以如想要傳入的實參*/) => {
    var key = JSON.stringify(parseInt(this.state.panes[parseInt(this.state.panes.length)-1].key)+1)  // key值是panes數(shù)組最后一項的key鍵的值加一
    tabsStore.addTabs('導(dǎo)航'+key,'/login'+key,key) // 使用 狀態(tài)管理的方法
    emitter.emit('key', key)   //兄弟之間傳值  傳入最新的activeKey值
  };

/*例子：
 add = (tit,url,id) => {
   // 判斷標(biāo)簽頁是否存在
   // 通過對象id值得判斷
    
    if(tabsStore.checkId(id)){
//判斷為true
      this.props.history.push(tabsStore.getUrl(id,tabsStore.panes))   通過當(dāng)前id 獲取url 并跳轉(zhuǎn)到當(dāng)前獲取的url
      emitter.emit('key', tabsStore.getKey(id))  通過id 獲取顯示的key值 傳給TabsT組件
      sessionStorage.setItem('activeKey',tabsStore.getKey(id))  刷新時使用，
     
    }else{
        標(biāo)簽頁不存在添加到panes數(shù)組
      var key = JSON.stringify(parseInt(this.state.panes[parseInt(this.state.panes.length)-1].key)+1)  // 當(dāng)前key值是panes數(shù)組最后一項對象的key鍵的值加一
      tabsStore.addTabs(tit,url,id,key) // 使用 狀態(tài)管理的方法
      emitter.emit('key', key)   //兄弟之間傳值 發(fā)給TabsT組件
      sessionStorage.setItem('activeKey',key)   刷新 
    } */


  render() {
    return (
        <div style={{ marginBottom: 16 }}>
          <Button onClick={this.add}>ADD</Button>
        </div>
    )
  }
}
export {AddTabs as default}

TabsT組件

import React from 'react';
import { Tabs } from 'antd';
import {observer} from 'mobx-react'
import tabsStore from "../../store/TabsStore";  //引入狀態(tài)管理文件 局部引入
import emitter from '../../util/event'   //引入 event
import RouterList from '../../component/PrivateRouter'
const { TabPane } = Tabs;
@observer
class TabsT extends React.Component {
  constructor(props) {
    super(props);
// 接收AddTabs組件傳的值
    emitter.on('key', opt => {
      // 參數(shù)
      this.setState({
        activeKey: opt
      })
    })
//初始數(shù)據(jù)
    this.state = {
      panes:tabsStore.getPane().panes,
      activeKey:sessionStorage.getItem('activeKey') || tabsStore.getKey().activeKey,
    };
  }
//點擊對應(yīng)的標(biāo)簽頁的顯示
  onChange =( activeKey) => {
    tabsStore.setActiveTabs(activeKey)
    this.setState({ activeKey });
 this.props.history.push(tabsStore.getKeyUrl(activeKey,tabsStore.panes))
  };
  // 叉掉標(biāo)簽頁
  onEdit = (targetKey) => {
    this.remove(targetKey)
  };
//移除
  remove = (targetKey) => {

    new Promise((resolve)=>{
       //判斷移除項是否是激活狀態(tài)
    // 存在
      if (this.state.activeKey==targetKey){
        let index = tabsStore.getIndex(targetKey)
        // 刪除的上一個數(shù)組對象的key
        let key = tabsStore.panes[index-1].key
       this.onChange(key)
        resolve()
      }else{
        resolve()
      }
    }).then(()=>{
      tabsStore.removeTabs(targetKey)
    })
  };

  render() {
    return (
        <div>
          <Tabs
              hideAdd
              onChange={this.onChange}
              activeKey={this.state.activeKey}
              type="editable-card"
              onEdit={this.onEdit}
          >
            {this.state.panes.map(pane => (
                <TabPane tab={pane.title} key={pane.key}>
                 {內(nèi)容顯示}
                </TabPane>
            ))}
          </Tabs>
        </div>
    )
  }
}

export {TabsT as default}

tabsStore ----mobx


import { observable, action } from 'mobx'
class TabsStore  {
  

  @observable  panes = JSON.parse(sessionStorage.getItem('panes')) || [
    { title: '會員信息統(tǒng)計',url:'/index/sysIndex/userTotal',id:11, key: '1' },
  ];//初始標(biāo)簽顯示幾個
  @observable  activeKey = this.panes[0].key//激活的 key值

  @action
  getPane(){
    return {
      panes:this.panes,
    }
  }
  // 獲取激活的key
  getKey(){
    return  {
      activeKey:this.activeKey
    }
  }

  // 添加標(biāo)簽
  addTabs=(tit,url,id,key)=>{
      this.panes.push({ title: tit, url: url,id:id, key: key });
      this.activeKey = key
      sessionStorage.setItem('panes',JSON.stringify(this.panes))//數(shù)組

  }

  // 點擊標(biāo)簽頁顯示
  setActiveTabs(activeIndex){
    this.activeKey = activeIndex
  }

// 判斷panes中是否存在id
checkId(id,arr){
  let istrue = false
  for(let i=0;i<this.panes.length;i++){
    if(id == this.panes[i].id){
      istrue = true
    }
  }
  return istrue
}
  // 根據(jù)對象id獲取url
  getUrl(id,arr){
    let url=''
    for(let i=0;i<arr.length;i++){
      if(id == arr[i].id){
        url = arr[i].url
      }
    }
    return url

  }
// 通過id獲取key
getKey(id){
  let key='';
  for(let i=0;i<this.panes.length;i++){
    if(id == this.panes[i].id){
      key = this.panes[i].key
    }
  }
  return key
}

// 通過key獲取url
  getKeyUrl(key,arr){
    let url=''
    for(let i=0;i<arr.length;i++){
      if(key == arr[i].key){
        url = arr[i].url
      }
    }
    return url

  }

  // 通過key獲取下標(biāo)
  getIndex(key){
    let index='';
    for(let i=0;i<this.panes.length;i++){
      if(key == this.panes[i].key){
        index = i;
      }
    }
    return index
  }


  // 移除標(biāo)簽
  // 從數(shù)組中移除數(shù)據(jù)
  removeTabs(targetKey){
    new Promise((resolve)=>{
      this.panes.forEach((pane, i) => {
        if (pane.key==targetKey){
          if (this.panes.length>1){
            if (i==0){
              this.panes.splice(i,1)
              resolve()
            }else {
              this.panes.splice(i,1)
              resolve()
            }
          }
        }
      });
     
    }).then(()=>{
      sessionStorage.setItem('panes',JSON.stringify(this.panes))//數(shù)組

    })

   
  }
}

const tabsStore = new TabsStore;

export default  tabsStore;
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。