Typescript输入onchange event.target.value

在我的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'.

当前回答

您可以执行以下操作:

import { ChangeEvent } from 'react';

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

2018-02-09 06:44:43

其他回答

const event = { target: { value: 'testing' } as HTMLInputElement };
handleChangeFunc(event as ChangeEvent<HTMLInputElement>);

这对我很有用。

2022-09-19 02:55:15

您可以执行以下操作:

import { ChangeEvent } from 'react';

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

2018-02-09 06:44:43

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

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

2020-07-24 10:31:01

如果你这样做，你不需要输入:

<input onChange={(event) => { setValue(e.target.value) }} />

因为如果你直接在html标签中使用箭头函数设置了一个新值，typescript将默认理解事件的类型。

2021-07-20 14:20:38

将字符串转换为数字简单答案

<input
    type="text"
    value={incrementAmount}
    onChange={(e) => {
      setIncrementAmmount(+e.target.value);
    }}
/>

2022-09-20 16:41:06

Typescript输入onchange event.target.value

推荐文章

最新文章

标签