在 React js 中，类型“ChangeEvent<HTMLInputElement>”不能分配给类型“ChangeEvent<HTMLSelectElement>”？

Question

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

父组件 -

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

<GlobalSearchAssignmentFilter
                    onChangeAssignmentStatus={onChangeStatus}
                />

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

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

组件代码 - <选择多个原生 onChange={(event: React.ChangeEvent):void => onChangeAssignmentStatus(ASSIGNMENT_STATUS_PROPERTY , event) } inputProps={{ 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的参数是这样的：eventonChangeAssignmentStatusReact.ChangeEvent<HTMLSelectElement>

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

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