471

In my react and typescript app, I use:

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

How do I correctly define the typings for the class, so I wouldn't have to hack my way around the type system with any?

export interface InputProps extends React.HTMLProps<Input> {
...

}

export class Input extends React.Component<InputProps, {}> {
}

If I put target: { value: string }; I get :

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'.
Soviut
  • 88,194
  • 49
  • 192
  • 260
wildeyes
  • 6,767
  • 5
  • 19
  • 37

21 Answers21

878

Generally event handlers should use e.currentTarget.value, e.g.:

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

You can read why it so here (Revert "Make SyntheticEvent.target generic, not SyntheticEvent.currentTarget.").

UPD: As mentioned by @roger-gusmao ChangeEvent more suitable for typing form events.

const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  const newValue = e.target.value;
}
Philippe Fanaro
  • 6,148
  • 6
  • 38
  • 76
Yozi
  • 11,435
  • 1
  • 22
  • 25
  • 87
    This simply does not work. value is not a property of the interface EventTarget – tocqueville Mar 28 '17 at 17:09
  • 2
    Of course not EventTarget, but part of HTMLInputElement You can see full definition here https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L279 – Yozi Mar 29 '17 at 05:31
  • 5
    Oh sorry, you used `currentTarget`. In that case yes, it works, but the question was about `target` – tocqueville Mar 29 '17 at 08:10
  • 4
    Yes, you right, but as mentioned in https://github.com/DefinitelyTyped/DefinitelyTyped/pull/12239 using `target` incorrect in most cases. Moreover, target does not have `T` to force us to write correctly – Yozi Mar 29 '17 at 16:29
  • 26
    This didn't work for me, I had to cast the event to `React.ChangeEvent` rather than a FormEvent. – Oblivionkey3 Feb 14 '19 at 16:55
  • by using ```e.target.value``` ,only ```ChangeEvent``` works – zahra shahrouzi Sep 15 '21 at 16:18
  • 1
    `React.ChangeEvent` is a very common TypeScript type that is used for this case in React. You can see a list of other common types on this cheat sheet: https://github.com/typescript-cheatsheets/react#basic-prop-types-examples – Anthony Avila Jul 08 '22 at 03:20
  • 1
    @AnthonyAvila yeah, right. I do not even remeber why I suggested FormEvent. ChangeEvent is a right version – Yozi Jul 11 '22 at 11:01
237

the correct way to use in TypeScript is

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

Follow the complete class, it's better to understand:

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;
Roger Gusmao
  • 3,788
  • 1
  • 20
  • 17
  • 5
    note: to ensure types are available, add `lib: ["dom"]` to `compilerOptions` in `tsconfig.json` – James Conkling Aug 10 '18 at 19:11
  • 3
    And if you have multiple inputs do you need to make a row for each? – Trevor Wood Apr 12 '19 at 04:33
  • Another way to make sure 'this' is assigned appropriately in the handleChange function would be to write handleChange as an arrow function i.e. handleChange = (e: React.ChangeEvent) => { this.setState(...); }; By doing that, one would no longer have to use the constructor to bind the handleEvent function. – tlavarea Sep 16 '19 at 19:05
  • One more way to handle 'this' instead of using the constructor and bind method would be to use the arrow function in the onChange prop i.e. onChange={e => this.handleChange(e)} – tlavarea Sep 16 '19 at 19:30
  • With these changes I am getting error: No overload matches this call. Overload 1 of 2, '(props: Readonly): Input', gave the following error. Type '(e: ChangeEvent) => void' is not assignable to type '(event: CustomEvent) => void'. Can someone please help me? – Sagar Mar 08 '20 at 23:42
  • I found this worked in later versions of react: React.ChangeEventHandler – httpete Sep 30 '20 at 18:34
89

You can do the following:

import { ChangeEvent } from 'react';

const onChange = (e: ChangeEvent<HTMLInputElement>)=> {
   const newValue = e.target.value;
}
KyleMit
  • 30,350
  • 66
  • 462
  • 664
Linshuizhaoying
  • 891
  • 6
  • 2
26

ChangeEvent<HTMLInputElement> is the type for change event in typescript. This is how it is done-

import { ChangeEvent } from 'react';

const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
    setValue(event.target.value);
};
Suraj Rao
  • 29,388
  • 11
  • 94
  • 103
navinrangar
  • 904
  • 10
  • 20
23

we can also use the onChange event fire-up with defined types(in functional component) like as follows:

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

Nawaraj Jaishi
  • 459
  • 3
  • 12
17

as HTMLInputElement works for me

haind
  • 1,000
  • 2
  • 16
  • 28
14

I use something like this:

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>
  );
}
Sergey Ivchenko
  • 1,497
  • 12
  • 11
  • 4
    Finally something worked. I still don't understand how a ChangeEvent does not have a value on currentTarger or target... – AO19 Jan 17 '21 at 20:15
12

The target you tried to add in InputProps is not the same target you wanted which is in React.FormEvent

So, the solution I could come up with was, extending the event related types to add your target type, as:

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

Once you have those classes, you can use your input component as

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

without compile errors. In fact, you can also use the first two interfaces above for your other components.

Leone
  • 3,258
  • 3
  • 22
  • 28
10

When using Child Component We check type like this.

Parent Component:

export default () => {

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

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

Child Component:

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

export Input:React.FC<Props> ({onChange}) => (
  <input type="tex" onChange={onChange} />
)
Ericgit
  • 6,089
  • 2
  • 42
  • 53
10

An alternative that has not been mentioned yet is to type the onChange function instead of the props that it receives. Using React.ChangeEventHandler:

const stateChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
    console.log(event.target.value);
};
fjplaurr
  • 1,818
  • 3
  • 19
  • 36
6

Here is a way with ES6 object destructuring, tested with TS 3.3.
This example is for a text input.

name: string = '';

private updateName({ target }: { target: HTMLInputElement }) {
    this.name = target.value;
}
anni
  • 1,403
  • 1
  • 24
  • 33
  • This is a great answer that works across the board. I was heavy on Angular, was forced onto React for a year, and am now playing with Angular again to stay fresh on it. React provides some really nice event interfaces that Typescript natively lacks. This approach helps get the same desired typing, even in vanilla. Thanks. – WebWanderer Oct 11 '21 at 17:14
6
const handleChange = (
    e: ChangeEvent<HTMLInputElement>
  ) => {
    const { name, value } = e.target;
    this.setState({ ...currentState, [name]: value });
  };

you can apply this on every input element in the form component

Yilmaz
  • 35,338
  • 10
  • 157
  • 202
5

This works for me also it is framework agnostic.

const handler = (evt: Event) => {
  console.log((evt.target as HTMLInputElement).value))
}
mehari
  • 3,057
  • 2
  • 22
  • 34
4

You no need to type if you do this:

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

Because if you set a new value with the arrow function directly in the html tag, typescript will understand by default the type of event.

3

This is when you're working with a FileList Object:

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;
}}
Dryden Williams
  • 1,175
  • 14
  • 22
3

Thanks @haind

Yes HTMLInputElement worked for input field

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

This HTMLInputElement is interface is inherit from HTMLElement which is inherited from EventTarget at root level. Therefore we can assert using as operator to use specific interfaces according to the context like in this case we are using HTMLInputElement for input field other interfaces can be HTMLButtonElement, HTMLImageElement etc.

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

For more reference you can check other available interface here

Ali Jamal
  • 1,383
  • 1
  • 13
  • 20
1
  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
  }

And make sure you have "lib": ["dom"] in your tsconfig.

avalanche1
  • 3,154
  • 1
  • 31
  • 38
1

Convert string to number simple answer

<input
    type="text"
    value={incrementAmount}
    onChange={(e) => {
      setIncrementAmmount(+e.target.value);
    }}
/>
Omor Faruk
  • 57
  • 8
1

This worked great for me.

  const [form, setForm] = useState<string>();

  const updateFormState = (event: { target: { value: React.SetStateAction<string | undefined>; }; }) => {
    setForm(event.target.value)
    console.log(form)
  }

And then the form in the return

<form onSubmit={handleClick}>
        <label>Input</label>
        <input value={form} onChange={updateFormState} type='text'></input>
        <button type='submit'>Submit</button>
 </form>
0
import { NativeSyntheticEvent, TextInputChangeEventData,} from 'react-native';



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

// Todo in type script use this

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

  
Keshav Gera
  • 10,807
  • 1
  • 75
  • 53
0
const event = { target: { value: 'testing' } as HTMLInputElement };
handleChangeFunc(event as ChangeEvent<HTMLInputElement>);

this work for me.

AndriyFM
  • 1,389
  • 14
  • 11