React Material UI 选项卡关闭答案

【问题标题】：React Material UI Tabs CloseReact Material UI 选项卡关闭
【发布时间】：2025-12-31 08:30:11
【问题描述】：

我正在实现具有关闭功能的材料 UI 选项卡。在关闭选项卡上无法在当前选项卡中设置活动选项卡值。它给出警告错误。

codesandbox中的代码

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

单击关闭图标时，您不仅在执行handleClose，还执行handleChange 函数。发生这种情况是因为称为事件冒泡的原理。

当一个元素上发生事件时，它首先在其上运行处理程序，然后在其父级上运行，然后一直在其他祖先上运行。

来源：javascript.info

要解决您的问题，您必须在关闭图标的点击事件上停止事件传播。将您的handleClose 修改为

const handleClose = useCallback(
    (event, tabToDelete) => {
      // stop event from propagating to the target element's parent
      event.stopPropagation(); 

      const tabToDeleteIndex = activetabs.findIndex(
        tab => tab.id === tabToDelete.id
      );
      const updatedTabs = activetabs.filter((tab, index) => {
        return index !== tabToDeleteIndex;
      });
      const previousTab =
        activetabs[tabToDeleteIndex - 1] ||
        activetabs[tabToDeleteIndex + 1] ||
        {};
      setActiveTabs(updatedTabs);
      setActiveTab(previousTab.id);
    },
    [activetabs]
  );

...现在你用它来称呼它

<a
   className="closeTab"
   title={"Close tab"}
   onClick={(event) => handleClose(event, tab)}
>
   <CloseIcon />
</a>

PS：如果要使用IconButton 组件而不是a 标签，请使用

<IconButton component="div" onClick={(event) => handleClose(event, tab)}>
   <CloseIcon />
</IconButton>

这将避免您从 material-ui 收到错误，您可能已经遇到过。

Warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button>.

codesandbox

【讨论】：

感谢您对此进行调查。