How to add button (onclick event) on tabs but not switch the panes

I want to add a button on top of list of tabs configured with semantic UI. Currently I have 2 tabs which can switch to panes when they are selected and I have third tab - I don't want it to switch when user click on it but rather dispatch an event (to expand the UI) or lets say a alert message. How to achieve this ?

CodePudding user response：

You need to make use of controlled state to achieve similar result. Take a look at the following example:

example.js

import React, { useState } from "react";
import { Label, Menu, Tab } from "semantic-ui-react";

const panes = [
  {
    menuItem: { key: "users", icon: "users", content: "Users" },
    render: () => <Tab.Pane>Tab 1 Content</Tab.Pane>
  },
  {
    menuItem: (
      <Menu.Item key="messages">
        Messages<Label>15</Label>
      </Menu.Item>
    ),
    render: () => <Tab.Pane>Tab 2 Content</Tab.Pane>
  },
  {
    menuItem: <Menu.Item key="open">Open</Menu.Item>
  }
];

const TabExampleCustomMenuItem = () => {
  const [activeIndex, setActiveIndex] = useState(0);
  return (
    <Tab
      panes={panes}
      activeIndex={activeIndex}
      onTabChange={(e, data) => {
        if (data.activeIndex === 2) {
          alert(`You've clicked on the "Open" tab!`);
          return;
        }
        setActiveIndex(data.activeIndex);
      }}
    />
  );
};

export default TabExampleCustomMenuItem;