类型错误：evt.target 未定义

Question

我已尝试实现自动完成输入字段。相应的文档可以在here 找到。如果需要更多代码，请告诉我。但是，涉及的代码有点长，我不想把它全部放在这里。

错误：

如果上面显示 2 个错误中的 1 个，请不要感到惊讶，但无论出于何种原因，相同的错误消息会显示两次。

我的代码：

AlarmstichworteAutocompleteForm/index.tsx

import * as React from 'react';
import { memo } from 'react';
import { useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { useSelector, useDispatch } from 'react-redux';
import { AutoComplete } from 'primereact/autocomplete';
import { messages } from './messages';
import {
  selectSuggestionInput,
  selectData,
  selectLoading,
  selectError,
} from './slice/selectors';
import {getAlarmstichworte} from './slice/saga';
import { AlarmstichwortErrorType } from './slice/types';
import { useAlarmstichworteAutocompleteFormSlice } from './slice';
import { fetchAlarmstichworte, fetchAlarmstichworteByName } from './slice/api';
import { Alarmstichwort } from '../../../../../../../types/Alarmstichwort';
import { lazyLoad } from '../../../../../../../utils/loadable';

interface Props {}

export const AlarmstichworteAutocompleteForm= memo((props: Props) => {

  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const {t,  i18n } = useTranslation();
  const {actions} = useAlarmstichworteAutocompleteFormSlice();
  const dispatch = useDispatch();

  const suggestionInput = useSelector(selectSuggestionInput);
  const data = useSelector(selectData);
  const loading = useSelector(selectLoading);
  const error = useSelector(selectError);

  const useEffectOnMount = (effect: React.EffectCallback) => {
    // eslint-disable-next-line react-hooks/exhaustive-deps
    useEffect(effect, []);
  };

  const onChangeSuggestionInput = (evt: React.ChangeEvent<HTMLInputElement>) => {
    dispatch(actions.changeSuggestionInput(evt.target.value)); // <-- Part of the error
    dispatch(actions.loadAlarmstichworte());
  };


  useEffectOnMount(() => {
    dispatch(actions.loadAlarmstichworte());
  });

  return(
    <div>
      <AutoComplete 
      dropdown 
      value={suggestionInput}
      suggestions={data} 
      onChange={(evt) => onChangeSuggestionInput(evt.value)} // <-- Part of the error
      />
    </div>
   
    );
});

其背后的想法如下：当输入输入到输入字段时，动作changeSuggestionInput将suggestInput添加到状态。再次运行actions.loadAlarmstichworte时，只显示API搜索输入与suggestInput匹配的结果。

更新：

如果我将 onChange={(evt) => onChangeSuggestionInput(evt.value)} 替换为 onChange={onChangeSuggestionInput}，则会收到以下错误：

`No overload matches this call.
  Overload 1 of 2, '(props: AutoCompleteProps | Readonly<AutoCompleteProps>): AutoComplete', gave the following error.
    Type '(evt: React.ChangeEvent<HTMLInputElement>) => void' is not assignable to type '(e: AutoCompleteChangeParams) => void'.
      Types of parameters 'evt' and 'e' are incompatible.
        Type 'AutoCompleteChangeParams' is missing the following properties from type 'ChangeEvent<HTMLInputElement>': nativeEvent, currentTarget, bubbles, cancelable, and 8 more.   
  Overload 2 of 2, '(props: AutoCompleteProps, context: any): AutoComplete', gave the following error.
    Type '(evt: React.ChangeEvent<HTMLInputElement>) => void' is not assignable to type '(e: AutoCompleteChangeParams) => void'.  TS2769```

Answer 1

错误就在这里。

 <AutoComplete 
      dropdown 
      value={suggestionInput}
      suggestions={data} 
      onChange={(evt) => onChangeSuggestionInput(evt.value)} 
      />

这里evt.value作为参数传递。

 const onChangeSuggestionInput = (evt:React.ChangeEvent<HTMLInputElement>)

在这个函数中，你正在访问evt.target。

您可以在调用部分删除错误。

    onChange={onChangeSuggestionInput}