时间戳

首页 > 解决方案 > React Material UI 选项卡 关闭

reactjs - React Material UI 选项卡 关闭

问题描述

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

密码箱中的代码

标签： reactjsmaterial-ui

解决方案

单击关闭图标时，您不仅在执行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>.

密码箱

推荐阅读