ReactAntd(十四) React-Tabs 的使用

React-Tabs 的使用

必须要引用的包

import { Card, Tabs, message } from 'antd'

基础版本使用

• state 数据

  defaultActiveKey: '1',
  listBasicTab: [
        {
          name: '第一个',
          key: 1,
          content: '第一个内容',
        },
        {
          name: '第二个',
          key: 2,
          content: '第二个内容',
        },
        {
          name: '第三个',
          key: 3,
          content: '第三个内容',
        },
        {
          name: '第四个',
          key: 4,
          content: '第四个内容',
        },
      ],

• 基础使用

<CardWrap>
  <Card title="Tabs基础知识点">
    <Tabs
      defaultActiveKey={this.state.defaultActiveKey}
      onChange={this.handleChange}
    >
      {this.state.listBasicTab.map((item) => {
        if (item.key === 3) {
          return (
            <Tabs.TabPane tab={item.name} key={item.key} disabled>
              {item.content}
            </Tabs.TabPane>
          )
        }
        return (
          <Tabs.TabPane tab={item.name} key={item.key}>
            {item.content}
          </Tabs.TabPane>
        )
      })}
    </Tabs>
  </Card>
</CardWrap>

• 事件

  handleChange(e) {
    message.success({
      content: `这就是内容,3s后自动消失${e}`,
      className: 'custom-class2',
      style: {
        marginTop: '20vh',
      },
      duration: 3,
    })
    this.setState({
      activeKey: e,
    })
  }

使用带图标的 Tab

• state

import {
  DownloadOutlined,
  SearchOutlined,
  PlusOutlined,
  FormOutlined,
  DeleteOutlined,
} from '@ant-design/icons'

      listIconTab: [
        {
          name: '第一个',
          key: 1,
          content: '第一个内容',
          iconfont: <DownloadOutlined />,
        },
        {
          name: '第二个',
          key: 2,
          content: '第二个内容',
          iconfont: <SearchOutlined />,
        },
        {
          name: '第三个',
          key: 3,
          content: '第三个内容',
          iconfont: <PlusOutlined />,
        },
        {
          name: '第四个',
          key: 4,
          content: '第四个内容',
          iconfont: <FormOutlined />,
        },
        {
          name: '第五个',
          key: 5,
          content: '第五个内容',
          iconfont: <DeleteOutlined />,
        },
      ],

• 带图标的使用

<CardWrap>
  <Card title="Tabs带图标">
    <Tabs
      defaultActiveKey={this.state.defaultActiveKey}
      onChange={this.handleChange}
    >
      {this.state.listIconTab.map((item) => {
        return (
          <Tabs.TabPane
            key={item.key}
            tab={
              <span>
                {item.iconfont}
                {item.name}
              </span>
            }
          >
            {item.content}
          </Tabs.TabPane>
        )
      })}
    </Tabs>
  </Card>
</CardWrap>

新增和删除 Tab 标签

• 这里特别主义 activeKey 必须是字符串类型

<CardWrap>
  <Card title="新增和删除Tab标签">
    <Tabs
      activeKey={this.state.activeKey}
      defaultActiveKey={this.state.defaultActiveKey}
      onChange={this.handleChange}
      type="editable-card"
      onEdit={this.onEdit}
    >
      {this.state.listEditTab.map((item) => {
        return (
          <Tabs.TabPane
            key={item.key}
            tab={
              <span>
                {item.iconfont}
                {item.name}
              </span>
            }
            closable={item.closable}
          >
            {item.content}
          </Tabs.TabPane>
        )
      })}
    </Tabs>
  </Card>
</CardWrap>

• state 数据

      defaultActiveKey: '1',
      activeKey: '1',
      listEditTab: [
        {
          name: '第一个',
          key: 1,
          content: '第一个内容',
          iconfont: <SearchOutlined />,
          closable: false,
        },
        {
          name: '第二个',
          key: 2,
          content: '第二个内容',
          iconfont: <FormOutlined />,
          closable: false,
        },
        {
          name: '第三个',
          key: 3,
          content: '第三个内容',
          closable: false,
          iconfont: <DeleteOutlined />,
        },
      ],

• 事件

  onEdit(targetKey, action) {
    console.log(action) //结果就是remove
    console.log(targetKey) //结果就是活跃的key
    this[action](targetKey)
  }

• 删除事件 remove

  remove(targetKey) {
    //targetkey 就是你要删除的key
    let { activeKey } = this.state //获取到当前索引
    let lastIndex //一个序号 找到最后在数组里面的实际位置
    console.log(targetKey)
    console.log(activeKey)
    console.log('删除')
    this.state.listEditTab.forEach((pane, i) => {
      if (pane.key === targetKey) {
        //表示如果要相等就-1这样排除掉第一个
        lastIndex = i - 1
      }
    })
    let listEditTab = this.state.listEditTab.filter(
      (pane) => pane.key !== targetKey
    ) //保留下除去你要删除的选项
    if (listEditTab.length && activeKey === targetKey) {
      //最后找到实际在panes里面的key值
      if (lastIndex >= 0) {
        activeKey = listEditTab[lastIndex].key.toString()
      } else {
        activeKey = listEditTab[0].key.toString()
      }
    }
    this.setState({ listEditTab, activeKey })
  }

• add 增加事件

add = () => {
  const { listEditTab } = this.state
  console.log(listEditTab.length)
  let activeKey = (listEditTab.length + 1).toString() //前面加中文是为了防止和最开始的key重复
  listEditTab.push({
    name: `新增加的${activeKey}`,
    key: activeKey,
    content: '新增加的内容',
    iconfont: <FormOutlined />,
  })
  this.setState({ listEditTab, activeKey })
}