如何使用函数式组件在 AntDesign 中添加和删除标签？

Question

您好，我想使用功能组件添加选项卡和删除选项卡：

我 tried.I 在这里看到了使用 classComponrnt 的解决方案，但是当我在功能组件中尝试添加时，它不起作用。

请帮我解决这个问题

代码如下：

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

谢谢

Answer 1

像下面这样更新添加逻辑，

   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
      }
    ]);
  };

删除：-

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 中添加和删除标签？

How to Add and Remove Tab in AntDesign using Functional Component?

reactjs

antd