Typescript React <Select> onChange 处理程序类型错误

Question

我正在尝试向 material-ui 的 Select 组件添加一个 onChange 事件处理程序：

 <Select
      labelId="demo-simple-select-label"
      id="demo-simple-select"
      value={values.country}
      onChange={handleCountryChange}
    >
      {countries.map(c => {
        return (
          <MenuItem value={c}>{c}</MenuItem>
        )
      })}
    </Select>

和我的事件处理程序：

 const handleCountryChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
    setValues({...values, country: event.target.value});
  };

但我收到以下错误：

类型 ‘(event: ChangeEvent) => void’ 不可分配给类型 ‘(event: ChangeEvent<{ name?: string | undefined; value: unknown; }>, child: ReactNode) => void’。

怎么了？

原文由 Desiigner 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

由于 MUI Select 不是真正的选择元素，您需要使用 — e.target.value as Type 并将处理程序键入 React.ChangeEvent<{ value: unknown }>

 const handleCountryChange = (event: React.ChangeEvent<{ value: unknown }>) => {
  setValues({...values, country: event.target.value as string});
};

原文由 Asaf Aviv 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这适用于最新的 MUI 5 / Select

   import { SelectChangeEvent } from "@mui/material";

   const handleOnChange = (event: SelectChangeEvent<unknown>) => {
    const value = event.target.value as YourEnumType;
  };

原文由 httpete 发布，翻译遵循 CC BY-SA 4.0 许可协议