reactjs - 為什麼我必須將 event.target 強制轉換為 HTMLInputElement

我有一個使用 Material Ui 並帶有一些主題覆蓋的代碼庫。我正在設置我的 SettingContext 和 SettingsProvider，但遇到了一些我不太理解的語法。

拿下列物品：

const initialState: SettingsContextProps = {
  ...defaultSettings,

  onToggleMode: () => {},
  onChangeMode: () => {},

 
  onToggleContrast: () => {},
  onChangeContrast: () => {},


  onChangeColor: () => {},


};

SettingsContextProps 類型是這樣設置的：

export type SettingsContextProps = {
    

  
    onToggleMode: VoidFunction;
    onChangeMode: (event: React.ChangeEvent<HTMLInputElement>) => void;
  

    onToggleContrast: VoidFunction;
    onChangeContrast: (event: React.ChangeEvent<HTMLInputElement>) => void;
  

    onChangeColor: (event: React.ChangeEvent<HTMLInputElement>) => void;


  };

當我在設定我的提供者時，我試圖理解語法，但我遇到困難。為什麼我要使用這個類型轉換 event.target as HTMLInputElement).value as ThemeMode

export function SettingsProvider({ children, defaultSettings }: SettingsProviderProps) {
  const [settings, setSettings] = useState(defaultSettings);

  const onToggleMode = () => {
    setSettings({
      ...settings,
      themeMode: settings.themeMode === 'light' ? 'dark' : 'light',
    });
  };

  const onChangeMode = (event: ChangeEvent<HTMLInputElement>) => {
    setSettings({
      ...settings,
      themeMode: (event.target as HTMLInputElement).value as ThemeMode,
    });
  };

  const onToggleContrast = () => {
    setSettings({
      ...settings,
      themeContrast: settings.themeContrast === 'default' ? 'bold' : 'default',
    });
  };

  const onChangeContrast = (event: ChangeEvent<HTMLInputElement>) => {
    setSettings({
      ...settings,
      themeContrast: (event.target as HTMLInputElement).value as ThemeContrast,
    });
  };


    const onChangeColor = (event: ChangeEvent<HTMLInputElement>) => {
        setSettings({
            ...settings,    
            themeColorPresets: (event.target as HTMLInputElement).value as ThemeColorPresets,
        })

而最後他們所扮演的角色類型

  export type ThemeMode = 'light' | 'dark';
  export type ThemeContrast = 'default' | 'bold';
  export type ThemeColorPresets = 'default' | 'purple' | 'cyan' | 'blue' | 'orange' | 'red';

這行 themeColorPresets: (event.target as HTMLInputElement).value as ThemeColorPresets 在做什麼？

答案＃1

嘗試將 event.target 改為 event.currentTarget，因為 target 並不總是擁有監聽器的元素