我传递一个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.
如何解决此错误?
1条答案
按热度按时间iibxawm41#
在
onChangeStatus
函数中,您期望e
的类型为React.ChangeEvent<HTMLSelectElement>
。但是,在
interface A
中,您将event
的类型设置为React.ChangeEvent<HTMLInputElement>
。这两个类型不匹配,这就是为什么你得到错误。
如果你想修复这个错误,修改
onChangeStatus
函数中的参数e
,使其类型为React.ChangeEvent<HTMLInputElement>
,如下所示:或者修改
interface A
,使函数onChangeAssignmentStatus
的参数event
的类型为React.ChangeEvent<HTMLSelectElement>
,如下所示:此外,您可以将
onChangeStatus
的类型设置为与interface A
中的类型相匹配。通过这种方式,typescript可以准确地告诉您参数应该是什么类型。如果你想这样做,你可以用A['onChangeAssignmentStatus']
访问onChangeAssignmentStatus
的类型。