Javascript 如何通过单击按钮和单击选项卡菜单在选项卡之间切换？

我有一个组件

MainContent

，它显示了一个包含一些项目列表的表。它还渲染带有选项卡的折叠部分。该表有一列，显示一些操作（编辑、查看等），这些操作通过图标（语义UI React）显示。我想通过单击这些图标以及单击选项卡菜单在这些选项卡之间切换。 所以目前我只能用onClick切换这些图标

目前的执行情况：

const MainContent=（）=>{
常量[activeIndex，setactiveIndex]=useState（0）；
const handleClickView=（展开，选项卡）=>{
setActiveKey（扩展）；
//在父级和用例之间切换
如果（制表符=“用例”）{
setactiveIndex（0）；
}否则{
setactiveIndex（1）；
}
....
....
};
常量路由内容=（路由、索引）=>{
返回(
.... 
....
....
handleClickView（“0”，“父”，事件）}
/>
handleClickView（“0”，“父”，事件）}
/>
);
};
//正在遍历子模拟。。。
常量内容=（项目、索引）=>{
退货项目。是否退货(
....
....
....
handleClickView（“0”，“用例”）}
/>
handleClickView（“0”，“用例”）}
/>
....
....
) : (
....
....
....
);
};
返回(
....
....
....
{加载(
....
....
....
行动
{data.map（（路由，索引）=>{
返回路线图（目录、索引）；
})}
) : (
.....
....
...
)}
);
};
导出默认主内容；

这是AddMock.js

const AddMock=forwardRef（（props，ref）=>{
....
....
返回(
.....
.....
);
});
导出默认的AddMock；

这是禁忌内容

const窗格=[
{
菜单项：“父项”，
....
},
{
menuItem：“用例”，
....
},
},
];
常量选项卡内容=（道具）=>(
);
导出默认选项卡内容；

因此，目前有了这个解决方案，我只能通过单击表中的图标切换到选项卡。我想通过单击它切换到另一个选项卡。由于

activeIndex

设置了一个值，因此禁用了另一个选项卡。非常感谢您的帮助。

请按照此处的步骤操作 步骤1： 添加另一个函数“handleItemClick”，该函数包含选项卡的一个参数id/索引。像

handleItemClick = (id) => this.setState({ activeIndex: id });

步骤2： 在图标元素中附加具有项目索引/id的单击事件，如

<Icon
  link
  name="eye"
  onClick={() => this.handleItemClick(1)}
/>

this.handleItemClick（1）}
/>

或者点击这个链接

希望能解决你的问题

---

谢谢请添加一个可运行的代码，如codesandbox.io、jsfiddle、stackblitz.com，并插入链接her.@Md.AbuSayed谢谢您的回复！请找到我的答案，它对你有帮助！