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

【问题标题】：Typescript React <Select> onChange handler type errorTypescript React <Select> onChange 处理程序类型错误
【发布时间】：2020-02-28 17:46:12
【问题描述】：

我正在尝试从 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, child: ReactNode) => void'。

怎么了？

【问题讨论】：

标签： javascript reactjs typescript material-ui

【解决方案1】：

对我来说似乎也违反直觉，但我不得不这样做：

const handleChange = (e: ChangeEvent<{ value: string | unknown }>) => formik.setFieldValue('field', e.target.value)

【讨论】：

【解决方案2】：

这适用于最新的 MUI 5 / Select

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

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

【讨论】：

这对我不起作用。我看到SelectChangeEvent 定义为export type SelectChangeEvent<T = string> = | (Event & { target: { value: T; name: string } }) | React.ChangeEvent<HTMLInputElement>;
我错过了什么吗？
我不得不这样做：const handleThingChanged = (event: ChangeEvent<{ name?: string, value: unknown}>): void => {
非常接近这个的东西对我有用。从 Mui 导入事件类型定义似乎是要走的路。 const handleChange = (event: SelectChangeEvent<string>) => { onMoodChange(event.target.value); };

【解决方案3】：

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

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

【讨论】：

即使这样也行不通。 src/core/content/content.component.tsx 第 67:37 行：解析错误：缺少分号。 65 | 66 | const handleChange = (event: React.ChangeEvent) => { > 67 | const value = event.target.value as string[]; | ^ 68 |调试器； 69 |设置数据线（值）； 70 | };
是的，它不工作

【解决方案4】：

SelectInput.d.ts 中更改事件的定义似乎不正确。更多内容：https://github.com/mui-org/material-ui/issues/15400#issuecomment-484891583

尝试使用他们推荐的签名：

const handleCountryChange = (event: any) => { ... }

【讨论】：

这不是他们推荐的签名，那是一个懒惰的anyahahah