如何使用 Ant Design 将自定义添加按钮添加到水平选项卡

Question

我正在使用 AntDesign 绘制水平选项卡，我想在选项卡旁边添加自定义的添加按钮，如何使用 Ant design 来实现，我们在 Antdesign 中内置了配置 With + Symbol 我该怎么做。目前看来是这样的。

这是代码

import React,{useState} from 'react'
import { Tabs, Button,Row,Col } from 'antd';

const { TabPane } = Tabs;

const CompoundsTabs = () => {

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

      
      const onChange = (activeKey) => {
        setActiveState(activeKey);
      };

      
      const onEdit = (targetKey, action) => {
        if (action === "remove") {
          console.log("sdsds", targetKey);
          remove(targetKey);
        } else if (action === "add") {
          add();
        }
      };

      const deleteCompound=()=>{
        console.log("delete")
      }
    return (
        <div>
        <Tabs
          type="editable-card"
          onChange={onChange}
          activeKey={activeState}
          onEdit={onEdit}
          hideRemove
        >
          {panes.map((pane) => (
            <TabPane tab={<Row><Col span={18}>{pane.title} </Col>
            <Col span={4}></Col>
            <Col span={2} onClick={deleteCompound}>X</Col>
            </Row>} key={pane.key}>
           
                {pane.content}
         
                
           
            </TabPane>
          ))}
        </Tabs>
      </div>
    )
}

export default CompoundsTabs

我提到了 https://ant.design/components/tabs/ and https://codepen.io/pen/?&editors=001 这里是选项卡上方的自定义按钮，我希望它位于最后一个选项卡旁边。

谁能帮我解决这个问题？

谢谢

Answer 1

创建新的按钮组件：-

    const MyButton = () => {
  return <Button type="primary">Customize Button</Button>;
};

然后在 addIcon 属性中使用 :-

 <Tabs
        type="editable-card"
        onChange={this.onChange}
        activeKey={activeKey}
        addIcon={<MyButton />}
        onEdit={this.onEdit}
      >
        {panes.map(pane => (
          <TabPane tab={pane.title} key={pane.key} closable={pane.closable}>
            {pane.content}
          </TabPane>
        ))}
      </Tabs>

如何使用 Ant Design 将自定义添加按钮添加到水平选项卡

how to add Customized Add Button to horizontal Tab using AntDesign

reactjs

antd