reactjs - 类型 'ChangeEvent<HTMLInputElement>' 在 React js 中不能分配给类型 'ChangeEvent<HTMLSelectElement>'？

Question

我正在将一个 onChange 事件作为 Prop 传递给一个组件，但我收到了数据类型错误。
父组件 -

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

<GlobalSearchAssignmentFilter
                    onChangeAssignmentStatus={onChangeStatus}
                />

子组件 -
我已经定义了一个接口(interface)

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

组件代码 -
<选择
多
本国的
onChange={(event: React.ChangeEvent):void =>
onChangeAssignmentStatus(ASSIGNMENT_STATUS_PROPERTY , 事件)
}
输入 Prop ={{
id: 'select-multiple-native',
}}
>
{assignmentFilterData.assignmentDispositions.map((item: any) => (

{item.key}

))}

我正在从 Material UI 多选中导入 Select。当我将 onChangeAssignmentStatus 事件传递给子组件时出现错误。错误是——

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. 

我该如何解决这个错误？

Answer 1

在您的 onChangeStatus功能，您期待 e类型为 React.ChangeEvent<HTMLSelectElement> .
但是，在您的 interface A ，你设置了event的类型至 React.ChangeEvent<HTMLInputElement> .
这两种类型不匹配，这就是您收到错误的原因。
如果要修复错误，请修改参数e在您的 onChangeStatus函数类型为 React.ChangeEvent<HTMLInputElement>像这样:

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

或修改您的 interface A所以参数event功能onChangeAssignmentStatus类型为 React.ChangeEvent<HTMLSelectElement>像这样:

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

此外，您可以设置 onChangeStatus 的类型匹配 interface A 中的那个.这样 typescript 会告诉你参数应该是什么类型。如果你想这样做，你可以访问类型onChangeAssignmentStatus与 A['onChangeAssignmentStatus'] .