Der beste Weg, um eine Drei-Zustands-Umschaltung in React zu implementieren?

Question

Ich erstelle in React einige Schaltflächen, die einen Zustandswechsel von einem zum nächsten auslösen. Einige meiner Schaltflächen haben drei Zustände, dargestellt durch Aufzählungen. Diese drei Zustände sollten nacheinander eingestellt werden. Wenn der letzte Wert erreicht ist, sollte die nächste Operation den Zustand wieder auf den ersten Wert der Aufzählung zurücksetzen. Was ist der clevere Weg, dies zu erreichen?

import { create } from 'zustand'
import { devtools, persist, createJSONStorage } from 'zustand/middleware'
import { BackgroundVariant as Background } from 'reactflow';

function nextBackground(background: Background): Background {
  switch (background) {
    case Background.Dots:
      return Background.Cross;
    case Background.Cross:
      return Background.Lines;
    default:
      return Background.Dots;
  };
};

interface MenuState {
  background: Background;
  toggleBackground: () => void;
}

export const useMenuStore = create<MenuState>()(
  devtools(
    persist(
      (set) => ({
        background: Background.Dots,
        toggleBackground: () => set((state) => ({
          background: nextBackground(state.background)
        }))
      }),
      {
        name: 'menu-storage',
        storage: createJSONStorage(() => localStorage),
      }
    )
  )
);

Answer 1

下面是一个函数的示例，它接受任何枚举并将返回下一个值或第一个值（如果是最后一个值）：

function getNextEnumValue>(enumObj: T, currentValue: T[keyof T]): T[keyof T] {
  const enumValues = Object.values(enumObj);
  const enumKeys = Object.keys(enumObj) as (keyof T)[];
  const currentIndex = enumKeys.findIndex(key => enumObj[key] === currentValue);

  if (currentIndex === -1) {
    throw new Error(`Invalid enum value: ${currentValue}`);
  }

  const nextIndex = currentIndex + 1;
  if (nextIndex === enumKeys.length) {
    return enumObj[enumKeys[0]];
  }

  const nextValue = enumObj[enumKeys[nextIndex]];
  if (!enumValues.includes(nextValue)) {
    throw new Error(`Invalid enum value: ${nextValue}`);
  }

  return nextValue;
}