Question

我正尝试将onChange事件处理程序添加到material-ui的Select组件中：

<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'。

怎么了？

Answer 1

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

尝试使用其推荐的签名：

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

Answer 2

由于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});
};

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

2 个答案: