如何使用功能组件在 AntDesign 中添加和删除选项卡? [英] How to Add and Remove Tab in AntDesign using Functional Component?

问题描述

我想使用功能组件添加选项卡并删除选项卡:

这是我尝试过的.我使用 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 中添加和删除选项卡?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！