Вкладки пользовательского интерфейса React Material Close

Question

Я реализую вкладки пользовательского интерфейса материалов с близкой функциональностью. На закрытой вкладке невозможно установить значение активной вкладки в текущей вкладке. выдает ошибку предупреждения.

код в codeandbox

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

codeandbox