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

当前回答

由于@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接口微软提供的外部节点模块接口

2020-07-26 16:10:45

其他回答

这也适用于我，它是框架不可知论者。

const handler = (evt: Event) => {
  console.log((evt.target as HTMLInputElement).value))
}

2022-04-26 03:32:42

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

name: string = '';

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

2019-02-17 15:30:46

import { NativeSyntheticEvent, TextInputChangeEventData,} from 'react-native';



  // Todo in java script
 const onChangeTextPassword = (text : any) => {
    setPassword(text);
  }

// Todo在类型脚本中使用这个

  const onChangeTextEmail = ({ nativeEvent: { text },}: NativeSyntheticEvent<TextInputChangeEventData>) => {
    console.log("________ onChangeTextEmail _________ "+ text);
    setEmailId(text);
  };


 <TextInput
          style={{ width: '100%', borderBottomWidth: 1, borderBottomColor: 'grey', height: 40, }}
          autoCapitalize="none"
          returnKeyType="next"
          maxLength={50}
          secureTextEntry={false}
          onChange={onChangeTextEmail}
          value={emailId}
          defaultValue={emailId}
          
        />

2021-09-20 13:33:37

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

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

2022-09-20 16:41:06

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

import { ChangeEvent } from 'react';

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

2022-06-23 05:43:12

Typescript输入onchange event.target.value

推荐文章

最新文章

标签