Typescript React <Select>onChange Ошибка типа обработчика

Question

Я пытаюсь добавить обработчик события onChange к компоненту Select из material-ui:

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

, но получаю следующееошибка:

Тип '(событие: ChangeEvent) => void' нельзя назначить типу (событие: ChangeEvent <{имя ?: строка | неопределенное; значение: неизвестно;}>, дочерний:ReactNode) => void '.

Что не так?

Answer 1

Поскольку MUI Select не является реальным элементом 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});
};

Answer 2

Кажется, определение для события изменения неверно в SelectInput.d.ts. Подробнее здесь: https://github.com/mui-org/material-ui/issues/15400#issuecomment-484891583

Попробуйте использовать их рекомендованную подпись:

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