在我的react和typescript应用程序中,我使用:

onChange={(e) => data.motto = (e.target as any).value}

我如何正确地定义类的类型,这样我就不必用任何类型系统来破解我的方法?

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

当前回答

还没有提到的另一种方法是输入onChange函数,而不是它接收到的道具。使用反应。ChangeEventHandler:

const stateChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
    console.log(event.target.value);
};

其他回答

由于@haind

是的HTMLInputElement为输入字段工作

//Example
var elem = e.currentTarget as HTMLInputElement;
elem.setAttribute('my-attribute','my value');
elem.value='5';

这个htmllinputelement的接口是继承自HTMLElement的,而HTMLElement是继承自根级别的EventTarget的。因此,我们可以根据上下文断言使用作为操作符来使用特定的接口,比如在这种情况下,我们使用HTMLInputElement作为输入字段,其他接口可以是HTMLButtonElement, HTMLImageElement等。

更多的参考,你可以检查其他可用的接口在这里

Mozilla的Web API接口 微软提供的外部节点模块接口

下面是ES6对象解构的一种方法,用TS 3.3测试。 这个例子是一个文本输入。

name: string = '';

private updateName({ target }: { target: HTMLInputElement }) {
    this.name = target.value;
}

as HTMLInputElement为我工作

当使用子组件时,我们像这样检查类型。

父组件:

export default () => {

  const onChangeHandler = ((e: React.ChangeEvent<HTMLInputElement>): void => {
    console.log(e.currentTarget.value)
  }

  return (
    <div>
      <Input onChange={onChangeHandler} />
    </div>
  );
}

子组件:

type Props = {
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
}

export Input:React.FC<Props> ({onChange}) => (
  <input type="tex" onChange={onChange} />
)

>是typescript中更改事件的类型。事情是这样的

import { ChangeEvent } from 'react';

const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
    setValue(event.target.value);
};