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，事件） } inputProps = {{ id：“ select-multiple-native”， }} > {assignmentFilterData.assignmentDispositions.map（（item：any）=>（ {item.key} ））}

我正在从材料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.

如何解决此错误？

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中的类型。这种打字稿可以准确地告诉您参数应为哪种类型。如果要执行此操作，可以使用onChangeAssignmentStatus访问A['onChangeAssignmentStatus']的类型。

在React js中，类型'ChangeEvent <HTMLInputElement>'是否可分配给类型'ChangeEvent <HTMLSelectElement>'？

1 个答案: