mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-14 16:19:15 +08:00
2.1 KiB
2.1 KiB
order | title | ||||
---|---|---|---|---|---|
9 |
|
zh-CN
只有卡片样式的页签支持新增和关闭选项。使用 closable={false}
禁止关闭。
en-US
Only card type Tabs support adding & closable. +Use closable={false}
to disable close.
import { Tabs } from 'antd';
import React, { useRef, useState } from 'react';
const { TabPane } = Tabs;
const initialPanes = [
{ title: 'Tab 1', content: 'Content of Tab 1', key: '1' },
{ title: 'Tab 2', content: 'Content of Tab 2', key: '2' },
{
title: 'Tab 3',
content: 'Content of Tab 3',
key: '3',
closable: false,
},
];
const App: React.FC = () => {
const [activeKey, setActiveKey] = useState(initialPanes[0].key);
const [panes, setPanes] = useState(initialPanes);
const newTabIndex = useRef(0);
const onChange = (newActiveKey: string) => {
setActiveKey(newActiveKey);
};
const add = () => {
const newActiveKey = `newTab${newTabIndex.current++}`;
const newPanes = [...panes];
newPanes.push({ title: 'New Tab', content: 'Content of new Tab', key: newActiveKey });
setPanes(newPanes);
setActiveKey(newActiveKey);
};
const remove = (targetKey: string) => {
let newActiveKey = activeKey;
let lastIndex = -1;
panes.forEach((pane, i) => {
if (pane.key === targetKey) {
lastIndex = i - 1;
}
});
const newPanes = panes.filter(pane => pane.key !== targetKey);
if (newPanes.length && newActiveKey === targetKey) {
if (lastIndex >= 0) {
newActiveKey = newPanes[lastIndex].key;
} else {
newActiveKey = newPanes[0].key;
}
}
setPanes(newPanes);
setActiveKey(newActiveKey);
};
const onEdit = (targetKey: string, action: 'add' | 'remove') => {
if (action === 'add') {
add();
} else {
remove(targetKey);
}
};
return (
<Tabs type="editable-card" onChange={onChange} activeKey={activeKey} onEdit={onEdit}>
{panes.map(pane => (
<TabPane tab={pane.title} key={pane.key} closable={pane.closable}>
{pane.content}
</TabPane>
))}
</Tabs>
);
};
export default App;