打字稿输入onchange event.target.value

问题描述：

在我的反应和打字稿应用程序中，我使用：onChange={(e) => data.motto = (e.target as any).value}。打字稿输入onchange event.target.value

我该如何正确定义班级的类型，所以我不会在any类型的系统中绕过我的方式？

export interface InputProps extends React.HTMLProps<Input> { 
... 

} 

export class Input extends React.Component<InputProps, {}> { 
}

如果我把target: { value: string };我得到：

ERROR in [default] /react-onsenui.d.ts:87:18 
Interface 'InputProps' incorrectly extends interface 'HTMLProps<Input>'. 
    Types of property 'target' are incompatible. 
    Type '{ value: string; }' is not assignable to type 'string'.

答

你试图在InputProps添加的target是不是你想要的一样target这是React.FormEvent

因此，该解决方案我能想出了，扩展事件相关类型以添加您的目标类型，如：

interface MyEventTarget extends EventTarget { 
    value: string 
} 

interface MyFormEvent<T> extends React.FormEvent<T> { 
    target: MyEventTarget 
} 

interface InputProps extends React.HTMLProps<Input> { 
    onChange?: React.EventHandler<MyFormEvent<Input>>; 
}

一旦你有了这些类，你可以用你的输入组件，

<Input onChange={e => alert(e.target.value)} />

没有编译错误。实际上，您也可以使用上面的前两个界面来处理其他组件。

答

您可以为e定义'any'类型。的onChange = {（E：任意）=> data.motto = e.target.value}

这正是我不想这样做，因为它在这个问题说。 –

答

as HTMLInputElement作品对我来说

答

它看起来我们应该使用e.currentTarget.value。

onChange = (e: React.FormEvent<HTMLInputElement>) => { 
    const newValue = e.currentTarget.value; 
}

你可以阅读这个在这里https://github.com/DefinitelyTyped/DefinitelyTyped/pull/12239和

这根本行不通。值不是接口的属性EventTarget – tocqueville

当然不是EventTarget，而是HTMLInputElement的一部分您可以在此处看到完整定义https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d .ts＃L279 – Yozi

对不起，您使用了'currentTarget'。在这种情况下，是的，它的工作原理，但问题是关于'目标' – tocqueville

答

幸运，我找到一个解决方案。可以

从'react'导入{ChangeEvent};

，然后编写代码，如： e:ChangeEvent<HTMLInputElement>

打字稿输入onchange event.target.value

相关推荐