typescript 类型'ChangeEvent< HTMLInputElement>'不能赋值给React js中的类型'ChangeEvent< HTMLSelectElement>'?

92vpleto  于 2023-06-24  发布在  TypeScript
关注(0)|答案(1)|浏览(190)

我传递一个onChange事件作为一个 prop 到一个组件,但我得到数据类型错误。
父组件-

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;
}

组件代码-

<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>

我正在导入“从材质UI中选择”多选。当我将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.

如何解决此错误?

iibxawm4

iibxawm41#

onChangeStatus函数中,您期望e的类型为React.ChangeEvent<HTMLSelectElement>
但是,在interface A中,您将event的类型设置为React.ChangeEvent<HTMLInputElement>
这两个类型不匹配,这就是为什么你得到错误。
如果你想修复这个错误,修改onChangeStatus函数中的参数e,使其类型为React.ChangeEvent<HTMLInputElement>,如下所示:

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

或者修改interface A,使函数onChangeAssignmentStatus的参数event的类型为React.ChangeEvent<HTMLSelectElement>,如下所示:

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

此外,您可以将onChangeStatus的类型设置为与interface A中的类型相匹配。通过这种方式,typescript可以准确地告诉您参数应该是什么类型。如果你想这样做,你可以用A['onChangeAssignmentStatus']访问onChangeAssignmentStatus的类型。

相关问题