![AntDesign]( "AntDesign")
本文介绍了如何使用功能组件在 AntDesign 中添加和删除选项卡?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想使用功能组件添加选项卡并删除选项卡:
这是我尝试过的.我使用 classComponrnt 看到了解决方案，但是当我尝试使用功能性组件时，添加不起作用.
请帮我解决这个问题
代码如下:
import React,{useState} from 'react'从'antd'导入{标签，按钮}；const { TabPane } = 标签；const CreateTabs = () =>{const initialPanes = [{ title: 'Tab 1', content: 'Tab 1 的内容', key: '1' },{ title: 'Tab 2', content: 'Tab 2 的内容', key: '2' },]让 newTabIndex = 0;const [activeState,setActiveState]=useState(initialPanes[0].key)const [panes,setPanes]=useState(initialPanes)const add = () =>{让窗格=[]const activeKey = `newTab${this.newTabIndex++}`;const newPanes = [...窗格];newPanes.push({ title: 'New Tab', content: '新标签的内容', key: activeKey });setActiveState(activeKey);设置窗格(新窗格)};const onChange = activeKey =>{setActiveState(activeKey);};const onEdit = (targetKey, action) =>{//[动作](targetKey);};返回 (<div><标签type="editable-card";onChange={onChange}activeKey={activeState}onEdit={onEdit}>{panes.map(pane => (<TabPane tab={pane.title} key={pane.key}>{窗格内容}</TabPane>))}</Tabs>
)}导出默认 CreateTabs
谢谢
解决方案
更新添加逻辑如下，
const add = () =>{const activeKey =(panes && panes.length ? +panes[panes.length - 1].key : 0) + 1;setActiveState(activeKey);setPanes((prev) => [...上一个，{标题:标签"+ 活动键，内容:新标签的内容"，键:活动键}]);};
删除:-
const remove = (key) =>{setPanes((prev) => {const idx = prev.findIndex((item) => +item.key === +key);prev.splice(idx, 1);返回 [...prev];});};
Codesandbox - https://Codesandbox.io/s/nifty-meadow-049m7?file=/src/App.js:895-900
Hi I want to Add tabs and remove the tab using Functional Component:
Here what I tried.I saw the solution for this using classComponrnt but when I tried in functional Component Add is not working.
Please help me on this
Here is the code:
import React,{useState} from 'react'
import { Tabs, Button } from 'antd';
const { TabPane } = Tabs;
const CreateTabs = () => {
const initialPanes = [
{ title: 'Tab 1', content: 'Content of Tab 1', key: '1' },
{ title: 'Tab 2', content: 'Content of Tab 2', key: '2' },
]
let newTabIndex = 0;
const [activeState,setActiveState]=useState(initialPanes[0].key)
const [panes,setPanes]=useState(initialPanes)
const add = () => {
let panes=[]
const activeKey = `newTab${this.newTabIndex++}`;
const newPanes = [...panes];
newPanes.push({ title: 'New Tab', content: 'Content of new Tab', key: activeKey });
setActiveState(activeKey );
setPanes(newPanes)
};
const onChange = activeKey => {
setActiveState(activeKey);
};
const onEdit = (targetKey, action) => {
//[action](targetKey);
};
return (
<div>
<Tabs
type="editable-card"
onChange={onChange}
activeKey={activeState}
onEdit={onEdit}
>
{panes.map(pane => (
<TabPane tab={pane.title} key={pane.key}>
{pane.content}
</TabPane>
))}
</Tabs>
</div>
)
}
export default CreateTabs
Thanks
解决方案
Update the add logic like below,
const add = () => {
const activeKey =
(panes && panes.length ? +panes[panes.length - 1].key : 0) + 1;
setActiveState(activeKey);
setPanes((prev) => [
...prev,
{
title: "Tab " + activeKey,
content: "Content of new Tab",
key: activeKey
}
]);
};
remove:-
const remove = (key) => {
setPanes((prev) => {
const idx = prev.findIndex((item) => +item.key === +key);
prev.splice(idx, 1);
return [...prev];
});
};
Codesandbox - https://codesandbox.io/s/nifty-meadow-049m7?file=/src/App.js:895-900
这篇关于如何使用功能组件在 AntDesign 中添加和删除选项卡?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！