React Material UI 选项卡关闭

Question

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

代码在codesandbox中

Answer 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>.

代码沙盒