咨询MUI v4 Autocomplete组件onInputChange属性的事件类型及兼容问题

问题出在你给onInputChange回调指定的事件类型和MUI v4 Autocomplete实际传递的事件类型不匹配：默认情况下Autocomplete使用<input>元素而非<textarea>，所以事件对象对应的是HTMLInputElement而非HTMLTextAreaElement。

以下是几种可行的解决方案：

方案1：修正事件类型为HTMLInputElement #

直接将事件类型改为React.ChangeEvent<HTMLInputElement>，匹配组件默认的输入元素类型：

const handle = (e: React.ChangeEvent<HTMLInputElement>, currentValue: string, reason: string) => {
  console.log(e, currentValue, reason);
};

<Autocomplete onInputChange={handle} />

方案2：使用MUI提供的专用类型 #

MUI为Autocomplete的输入事件提供了专门的类型AutocompleteInputChangeEvent，它兼容<input>和<textarea>两种情况，导入后直接使用即可：

import { Autocomplete, AutocompleteInputChangeEvent } from '@material-ui/core';

const handle = (e: AutocompleteInputChangeEvent, currentValue: string, reason: string) => {
  console.log(e, currentValue, reason);
};

<Autocomplete onInputChange={handle} />

方案3：自定义textarea输入组件（如果确实需要） #

如果你必须让Autocomplete使用<textarea>作为输入载体，可以通过renderInput自定义输入组件，此时事件类型就可以用React.ChangeEvent<HTMLTextAreaElement>：

const handle = (e: React.ChangeEvent<HTMLTextAreaElement>, currentValue: string, reason: string) => {
  console.log(e, currentValue, reason);
};

<Autocomplete
  onInputChange={handle}
  renderInput={(params) => (
    <TextField {...params} multiline variant="outlined" />
  )}
/>

内容的提问来源于stack exchange，提问作者Richardson