（记录笔记4）——4.5 Tabs标签页

4.5 Tabs标签页

选项卡切换组件。

一.Tabs组件

1.Tabs组件

• 引入Tabs:import { Tabs } from ‘antd’;

• disabled设置页签不可点

• <TabPane tab="Tab 2" disabled key="2">Tab 2</TabPane>

import { Tabs } from 'antd';

const TabPane = Tabs.TabPane;

function callback(key) {
  console.log(key);
}

ReactDOM.render(
  <Tabs defaultActiveKey="1" onChange={callback}>
    <TabPane tab="Tab 1" key="1">Content of Tab Pane 1</TabPane>
    <TabPane tab="Tab 2" key="2" disabled>Content of Tab Pane 2</TabPane>
    <TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane>
  </Tabs>,
  mountNode);

二.基本实例

//src\pages\ui\tabs.js
import React from "react";
import "./ui.less";
import { Card, Tabs, message, Icon } from "antd";
const TabPane = Tabs.TabPane;
export default class Tabs1 extends React.Component {
  handleCallback = key => {
    //   console.log(key)
    message.info("Hi,您选择了页签: " + key);
  };
  render() {
    return (
      <div>
        <Card title="Tabs页签" className="card-wrap" >
          <Tabs defaultActiveKey="1" onChange={this.handleCallback}>
            <TabPane tab="Tab 1" key="1">
              欢迎学习React课程
            </TabPane>
            <TabPane tab="Tab 2" key="2">
              欢迎学习React课程
            </TabPane>
            <TabPane tab="Tab 3" key="3">
              React是一门非常受欢迎的MV*框架
            </TabPane>
          </Tabs>
        </Card>
      </div>
    );
  }
}

三. Tab带图标页签

注意:jsx 语法嵌套,要换成对象,这里用到引用 'Icon'的知识 这里指定图标要这样写

• {}中是根对象,用<span></span>进行包裹,然后定义图标+文字.

<TabPane tab={<span><Icon type="apple" />Tab 1</span>} key="1"/>

//src\pages\ui\tabs.js
import React from "react";
import "./ui.less";
import { Card, Tabs, message, Icon } from "antd";
const TabPane = Tabs.TabPane;
export default class Tabs1 extends React.Component {
  handleCallback = key => {
    //   console.log(key)
    message.info("Hi,您选择了页签: " + key);
  };
  render() {
    return (
      <div>
        <Card title="Tabs页签" className="card-wrap">
          <Tabs defaultActiveKey="1" onChange={this.handleCallback}>
            <TabPane tab="Tab 1" key="1">
              欢迎学习React课程
            </TabPane>
            <TabPane tab="Tab 2" key="2">
              欢迎学习React课程
            </TabPane>
            <TabPane tab="Tab 3" key="3">
              React是一门非常受欢迎的MV*框架
            </TabPane>
          </Tabs>
        </Card>
        <Card title="Tab带图标页签" className="card-wrap">
          <Tabs defaultActiveKey="1" onChange={this.handleCallback}>
            <TabPane
              tab={
                <span>
                  <Icon type="plus" />
                  Tab 1
                </span>
              }
              key="1"
            >
              创建属于你的React项目
            </TabPane>
            <TabPane
              tab={
                <span>
                  <Icon type="edit" />
                  Tab 2
                </span>
              }
              key="2"
            >
              尝试如何使用React进行修改
            </TabPane>
            <TabPane
              tab={
                <span>
                  <Icon type="delete" />
                  Tab 3
                </span>
              }
              key="3"
            >
              删除它，就这么简单
            </TabPane>
          </Tabs>
        </Card>
      </div>
    );
  }
}

四. Tab可关闭卡片式页签

既然是动态添加,就不能写死页签, 通过js变量循环的方式进行显示

• 定义生命周期方法 componentWillMount/componentDidMount

• 声明数组存储数据

• 定义setState存储在 state里

• type="editable-card"指定样式为可编辑的卡片样式

• onChange设置页签改变时调用方法,设置激活的key

• onEdit

• add

• remove

//src\pages\ui\tabs.js
import React from "react";
import "./ui.less";
import { Card, Tabs, message, Icon } from "antd";
const TabPane = Tabs.TabPane;
export default class Tabs1 extends React.Component {
  newTabIndex = 0;
  componentWillMount() {
    const panes = [
      {
        title: "Tab 1",
        content: "Tab 1",
        key: "1"
      },
      {
        title: "Tab 2",
        content: "Tab 2",
        key: "2"
      },
      {
        title: "Tab 3",
        content: "Tab 3",
        key: "3"
      }
    ];
    this.setState({
      activeKey: panes[0].key,
      //   panes: panes
      panes
    });
  }
  add = () => {
    const panes = this.state.panes;
    const activeKey = `newTab${this.newTabIndex++}`;
    panes.push({ title: activeKey, content: "New Tab Pane", key: activeKey });
    this.setState({ panes, activeKey });
  };

  remove = targetKey => {
    let activeKey = this.state.activeKey;
    let lastIndex;
    this.state.panes.forEach((pane, i) => {
      if (pane.key === targetKey) {
        lastIndex = i - 1;
      }
    });
    const panes = this.state.panes.filter(pane => pane.key !== targetKey);
    if (lastIndex >= 0 && activeKey === targetKey) {
      activeKey = panes[lastIndex].key;
    }
    this.setState({ panes, activeKey });
  };
  onChange = activeKey => {
    this.setState({
      activeKey
    });
  };
  onEdit = (targetKey, action) => {
    this[action](targetKey);
  };
  handleCallback = key => {
    //   console.log(key)
    message.info("Hi,您选择了页签: " + key);
  };
  render() {
    return (
      <div>
        <Card title="Tabs页签" className="card-wrap">
          <Tabs defaultActiveKey="1" onChange={this.handleCallback}>
            <TabPane tab="Tab 1" key="1">
              欢迎学习React课程
            </TabPane>
            <TabPane tab="Tab 2" key="2" disabled>
              欢迎学习React课程
            </TabPane>
            <TabPane tab="Tab 3" key="3">
              React是一门非常受欢迎的MV*框架
            </TabPane>
          </Tabs>
        </Card>
        <Card title="Tab带图标页签" className="card-wrap">
          <Tabs defaultActiveKey="1" onChange={this.handleCallback}>
            <TabPane
              tab={
                <span>
                  <Icon type="plus" />
                  Tab 1
                </span>
              }
              key="1"
            >
              创建属于你的React项目
            </TabPane>
            <TabPane
              tab={
                <span>
                  <Icon type="edit" />
                  Tab 2
                </span>
              }
              key="2"
            >
              尝试如何使用React进行修改
            </TabPane>
            <TabPane
              tab={
                <span>
                  <Icon type="delete" />
                  Tab 3
                </span>
              }
              key="3"
            >
              删除它，就这么简单
            </TabPane>
          </Tabs>
        </Card>
        <Card title="Tab可关闭卡片式页签" className="card-wrap">
          <Tabs
            onChange={this.onChange}
            activeKey={this.state.activeKey}
            onEdit={this.onEdit}
            type="editable-card"
          >
            {this.state.panes.map(panel => (
              <TabPane tab={panel.title} key={panel.key}>
                {panel.content}
              </TabPane>
            ))}
          </Tabs>
        </Card>
      </div>
    );
  }
}

API#

---

参数	说明	类型	默认值
defaultActiveKey	初始化选中面板的 key，如果没有设置 activeKey	string	第一个面板
hideAdd	是否隐藏加号图标，在 type="editable-card" 时有效	boolean	false
type	页签的基本样式，可选 line、card editable-card 类型	string	‘line’
onChange	切换面板的回调	Function(activeKey) {}	无
onEdit	新增和删除页签的回调，在 type="editable-card" 时有效	(targetKey, action): void	无
activeKey	当前激活 tab 面板的 key	string	无

Tabs.TabPane#

参数	说明	类型	默认值
forceRender	被隐藏时是否渲染 DOM 结构	boolean	false
key	对应 activeKey,决定页签是否被激活	string	无
tab	选项卡头显示文字	string|ReactNode	无