reactjs - Type 'ChangeEvent' kan ikke tildeles typen 'ChangeEvent' i React js?

Jeg sender en onChange-hendelse som en prop til en komponent, men jeg får en datatypefeil.

Foreldrekomponent -

const onChangeStatus=(selectType:string , e:React.ChangeEvent<HTMLSelectElement>) => {
        const { options } = e.target;
        console.log(options)
    }

<GlobalSearchAssignmentFilter
                    onChangeAssignmentStatus={onChangeStatus}
                />

Barnkomponent - Jeg har definert et grensesnitt som

interface A {
    onChangeAssignmentStatus: (
        selectType: string,
        event:React.ChangeEvent<HTMLInputElement>
    ) => void;
}

komponentkode -

<Select
   multiple
   native
   onChange={
    (event: React.ChangeEvent<HTMLInputElement>):void => onChangeAssignmentStatus(ASSIGNMENT_STATUS_PROPERTY , event)
   }
   inputProps={{
       id: 'select-multiple-native',
   }}
 >                             
   {assignmentFilterData.assignmentDispositions.map(
      (item: any) => (
         <option key={item.key} value={item.key}>
               {item.key}
         </option>
    ))}
</Select>

Jeg importerer Select fra Material UI multi select. Jeg får en feil når jeg sender onChangeAssignmentStatus-hendelsen til barnekomponenten. Feilen er -

Type '(selectType: string, e: React.ChangeEvent<HTMLSelectElement>) => void' is not assignable to type '(selectType: string, event: ChangeEvent<HTMLInputElement>) => void'.
  Types of parameters 'e' and 'event' are incompatible.
    Type 'ChangeEvent<HTMLInputElement>' is not assignable to type 'ChangeEvent<HTMLSelectElement>'.
      Type 'HTMLInputElement' is missing the following properties from type 'HTMLSelectElement': length, options, selectedIndex, selectedOptions, and 3 more.

Hvordan kan jeg løse denne feilen?

Svar #1

I din onChangeStatus-funksjon forventer du at e skal være av typen React.ChangeEvent<HTMLSelectElement>.

Men i din interface A, satte du typen på event til React.ChangeEvent<HTMLInputElement>.

Disse to typene stemmer ikke overens, derfor får du feilen.

Hvis du vil rette feilen, endre parameteren e i din onChangeStatus-funksjon til å ha typen React.ChangeEvent<HTMLInputElement> slik:

const onChangeStatus=(selectType:string , e:React.ChangeEvent<HTMLInputElement>) => {
        const { options } = e.target;
        console.log(options)
}

Eller endre din interface A slik at parameteren event i funksjonen onChangeAssignmentStatus er av typen React.ChangeEvent<HTMLSelectElement> slik:

interface A {
    onChangeAssignmentStatus: (
        selectType: string,
        event:React.ChangeEvent<HTMLSelectElement>
    ) => void;
}

Du kan også sette typen til onChangeStatus til å matche den i interface A. På denne måten forteller TypeScript deg nøyaktig hvilken type parameterne skal være. Hvis du vil gjøre dette, kan du få tilgang til typen til onChangeAssignmentStatus med A['onChangeAssignmentStatus'].

Relaterte artikler