PrimeReact AutoComplete出现evt.target undefined及TS类型报错如何解决？

问题原因 #

PrimeReact的AutoComplete组件的onChange回调返回的是组件自定义的AutoCompleteChangeParams类型对象，而非原生输入框的ChangeEvent对象，输入值直接挂载在该对象的value属性上，不存在原生事件对象的target字段，这是两类报错的共同根源。

修复步骤 #

1. 从primereact/autocomplete包中导入类型定义AutoCompleteChangeParams
2. 修改onChangeSuggestionInput函数的入参类型，同步调整取值逻辑
3. 直接将处理函数绑定到AutoComplete的onChange属性即可，无需额外包装

修复后核心代码 #

// 补充导入自定义类型
import { AutoComplete, AutoCompleteChangeParams } from 'primereact/autocomplete';

// 调整处理函数定义
const onChangeSuggestionInput = (evt: AutoCompleteChangeParams) => {
  dispatch(actions.changeSuggestionInput(evt.value));
  dispatch(actions.loadAlarmstichworte());
};

// 组件绑定调整
return(
  <div>
    <AutoComplete 
      dropdown 
      value={suggestionInput}
      suggestions={data} 
      onChange={onChangeSuggestionInput}
    />
  </div>
);

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