为什么我必须将event.target转换为HTMLInputElement

Question

我有一个使用Material Ui的代码库，其中包含一些主题覆盖。我正在设置我的SettingsContext和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线路在做什么？

Answer 1

尝试将event.target更改为event.currentTarget，因为target并不总是具有侦听器的元素