打字稿输入onchange event.target.value

Question

在我的react和typescript应用程序中，我使用：onChange={(e) => data.motto = (e.target as any).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'.

Answer 1

通常，事件处理程序应使用e.currentTarget.value，例如：

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

您可以在这里阅读原因（还原“使SyntheticEvent.target通用，而不是SyntheticEvent.currentTarget。”）。

UPD：如@ roger-gusmao所述，它ChangeEvent更适合于键入表单事件。

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