Question

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

{p> codesandbox

中的

代码

Answer 1

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

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

来源：javascript.info

-

要解决您的问题，必须在关闭图标的click事件上停止事件传播。将您的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

反应材质UI选项卡关闭

1 个答案: