Typescript输入onchange event.target.value

在我的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'.
623945 次浏览

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

所以,我能想出的解决方案是,扩展事件相关的类型来添加你的目标类型,如下:

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>>;
}

有了这些类之后,就可以使用输入组件as了

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

没有编译错误。事实上,您还可以将上面的前两个接口用于其他组件。

as HTMLInputElement适合我

通常,事件处理程序应该使用e.currentTarget.value,例如:

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

你可以在这里读到为什么会这样(还原“Make SyntheticEvent”。target generic,而不是syntheticevent . currentarget ")。

UPD:正如@roger-gusmao提到的,ChangeEvent更适合输入表单事件。

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

您可以执行以下操作:

import { ChangeEvent } from 'react';


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

在TypeScript中使用的正确方法是

  handleChange(e: React.ChangeEvent<HTMLInputElement>) {
// No longer need to cast to any - hooray for react!
this.setState({temperature: e.target.value});
}


render() {
...
<input value={temperature} onChange={this.handleChange} />
...
);
}

遵循完整的类,更好地理解:

import * as React from "react";


const scaleNames = {
c: 'Celsius',
f: 'Fahrenheit'
};




interface TemperatureState {
temperature: string;
}


interface TemperatureProps {
scale: string;


}


class TemperatureInput extends React.Component<TemperatureProps, TemperatureState> {
constructor(props: TemperatureProps) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = {temperature: ''};
}


//  handleChange(e: { target: { value: string; }; }) {
//    this.setState({temperature: e.target.value});
//  }




handleChange(e: React.ChangeEvent<HTMLInputElement>) {
// No longer need to cast to any - hooray for react!
this.setState({temperature: e.target.value});
}


render() {
const temperature = this.state.temperature;
const scale = this.props.scale;
return (
<fieldset>
<legend>Enter temperature in {scaleNames[scale]}:</legend>
<input value={temperature} onChange={this.handleChange} />
</fieldset>
);
}
}


export default TemperatureInput;
这是一种ES6对象解构的方法,用TS 3.3测试 本例为文本输入
name: string = '';


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

这是当你使用FileList对象时:

onChange={(event: React.ChangeEvent<HTMLInputElement>): void => {
const fileListObj: FileList | null = event.target.files;
if (Object.keys(fileListObj as Object).length > 3) {
alert('Only three images pleaseeeee :)');
} else {
// Do something
}


return;
}}
  function handle_change(
evt: React.ChangeEvent<HTMLInputElement>
): string {
evt.persist(); // This is needed so you can actually get the currentTarget
const inputValue = evt.currentTarget.value;


return inputValue
}

并且确保你的tsconfig中有"lib": ["dom"]

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

父组件:

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} />
)

还没有提到的另一种方法是输入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';

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

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement

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

我使用的方法是这样的:

import { ChangeEvent, useState } from 'react';




export const InputChange = () => {
const [state, setState] = useState({ value: '' });


const handleChange = (event: ChangeEvent<{ value: string }>) => {
setState({ value: event?.currentTarget?.value });
}
return (
<div>
<input onChange={handleChange} />
<p>{state?.value}</p>
</div>
);
}

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

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

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

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}
          

/>


  

我们还可以使用onChange事件触发定义的类型(在函数组件中),如下所示:

 const handleChange = (
e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>
) => {
const name = e.target.name;
const value = e.target.value;
};


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

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

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

import { ChangeEvent } from 'react';


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

这对我很有用。

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

<input
type="text"
value={incrementAmount}
onChange={(e) => {
setIncrementAmmount(+e.target.value);
}}
/>
const handleChange = (
e: ChangeEvent<HTMLInputElement>
) => {
const { name, value } = e.target;
this.setState({ ...currentState, [name]: value });
};

你可以在form组件中的每一个input元素上应用它