Typescript input onchange event.target.value

Question

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

Yozi · Accepted Answer · 2025-01-16 03:32:56Z

1000

Generally event handlers should use e.currentTarget.value:

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

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

edited Jan 16 at 3:32

answered Mar 7, 2017 at 10:24

Yozi

12.9k1 gold badge27 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Franc Over a year ago

This simply does not work. value is not a property of the interface EventTarget

Yozi Over a year ago

Of course not EventTarget, but part of HTMLInputElement You can see full definition here github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/…

Franc Over a year ago

Oh sorry, you used currentTarget. In that case yes, it works, but the question was about target

Yozi Over a year ago

Yes, you right, but as mentioned in github.com/DefinitelyTyped/DefinitelyTyped/pull/12239 using target incorrect in most cases. Moreover, target does not have T to force us to write correctly

Oblivionkey3 Over a year ago

This didn't work for me, I had to cast the event to React.ChangeEvent<HTMLInputElement> rather than a FormEvent.

|

Roger Gusmao · Accepted Answer · 2018-04-13 15:16:40Z

259

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;

edited Apr 13, 2018 at 15:16

answered Apr 13, 2018 at 15:08

Roger Gusmao

4,1461 gold badge22 silver badges19 bronze badges

6 Comments

James Conkling Over a year ago

note: to ensure types are available, add lib: ["dom"] to compilerOptions in tsconfig.json

Trevor Over a year ago

And if you have multiple inputs do you need to make a row for each?

tlavarea Over a year ago

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<HTMLInputElement>) => { this.setState(...); }; By doing that, one would no longer have to use the constructor to bind the handleEvent function.

tlavarea Over a year ago

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

Sagar Over a year ago

With these changes I am getting error: No overload matches this call. Overload 1 of 2, '(props: Readonly<Props>): Input', gave the following error. Type '(e: ChangeEvent<HTMLInputElement>) => void' is not assignable to type '(event: CustomEvent<ChangeDetail>) => void'. Can someone please help me?

|

KyleMit · Accepted Answer · 2021-04-06 23:04:16Z

92

You can do the following:

import { ChangeEvent } from 'react';

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

edited Apr 6, 2021 at 23:04

KyleMit♦

31.4k74 gold badges517 silver badges712 bronze badges

answered Feb 9, 2018 at 6:44

Linshuizhaoying

9216 silver badges2 bronze badges

Comments

Suraj Rao · Accepted Answer · 2022-06-23 05:44:08Z

30

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

edited Jun 23, 2022 at 5:44

Suraj Rao

29.7k11 gold badges96 silver badges104 bronze badges

answered Jun 23, 2022 at 5:43

navinrangar

1,49416 silver badges27 bronze badges

Comments

Nawaraj Jaishi · Accepted Answer · 2021-11-24 11:23:41Z

26

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

answered Nov 24, 2021 at 11:23

Nawaraj Jaishi

4914 silver badges12 bronze badges

Comments

haind · Accepted Answer · 2017-02-08 04:16:12Z

19

as HTMLInputElement works for me

answered Feb 8, 2017 at 4:16

haind

1,0122 gold badges16 silver badges28 bronze badges

2 Comments

J86 Over a year ago

That doesn't have a .target?

Jeff Klein Over a year ago

@J86 It's the target you're casting as HTMLInputElement. Since the EventTarget is an HTML element

Sergey Ivchenko · Accepted Answer · 2020-12-31 16:50:41Z

15

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

answered Dec 31, 2020 at 16:50

Sergey Ivchenko

1,62714 silver badges12 bronze badges

1 Comment

AO19 Over a year ago

Finally something worked. I still don't understand how a ChangeEvent<HTMLInputElement> does not have a value on currentTarger or target...

Leone · Accepted Answer · 2016-11-29 14:24:48Z

13

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.

answered Nov 29, 2016 at 14:24

Leone

3,4333 gold badges24 silver badges33 bronze badges

1 Comment

Roger Gusmao Over a year ago

The value type is not string!

Ericgit · Accepted Answer · 2020-07-19 03:27:36Z

12

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

answered Jul 19, 2020 at 3:27

Ericgit

7,1413 gold badges50 silver badges59 bronze badges

1 Comment

Oversteer Over a year ago

tiny edit remove extraneous parentheses - const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>): void => {

fjplaurr · Accepted Answer · 2020-07-24 10:31:01Z

11

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

answered Jul 24, 2020 at 10:31

fjplaurr

1,9503 gold badges22 silver badges40 bronze badges

Comments

Yilmaz · Accepted Answer · 2022-11-24 19:04:30Z

10

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

answered Nov 24, 2022 at 19:04

Yilmaz

51k19 gold badges226 silver badges278 bronze badges

Comments

falselight · Accepted Answer · 2023-12-11 00:39:50Z

10

const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const newValue = (event.target || event.currentTarget) as HTMLInputElement;
    return newValue.value;
}

answered Dec 11, 2023 at 0:39

falselight

88011 silver badges17 bronze badges

1 Comment

Yozi Over a year ago

When we can expect not having event.target? I'm interested what case it handles? event.target || event.currentTarget

anni · Accepted Answer · 2019-02-18 19:25:18Z

7

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

edited Feb 18, 2019 at 19:25

answered Feb 17, 2019 at 15:30

anni

1,4631 gold badge25 silver badges35 bronze badges

1 Comment

WebWanderer Over a year ago

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.

Mehari · Accepted Answer · 2022-04-26 03:32:42Z

7

This works for me also it is framework agnostic.

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

answered Apr 26, 2022 at 3:32

Mehari

3,2872 gold badges26 silver badges35 bronze badges

Comments

jmoerdyk · Accepted Answer · 2024-07-17 15:47:14Z

7

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

edited Jul 17, 2024 at 15:47

jmoerdyk

5,5448 gold badges43 silver badges58 bronze badges

answered Jul 16, 2024 at 6:27

chamara Pathum

711 silver badge3 bronze badges

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Dryden Williams · Accepted Answer · 2019-09-27 10:17:49Z

6

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

answered Sep 27, 2019 at 10:17

Dryden Williams

1,31517 silver badges22 bronze badges

Comments

Isaac Alencar de Olivera · Accepted Answer · 2021-07-20 14:20:38Z

5

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.

answered Jul 20, 2021 at 14:20

Isaac Alencar de Olivera

471 silver badge1 bronze badge

Comments

Ali Jamal · Accepted Answer · 2020-07-26 16:10:45Z

4

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.

For more reference you can check other available interface here

Web API interfaces by Mozilla
Interfaces in External Node Modules by Microsoft

answered Jul 26, 2020 at 16:10

Ali Jamal

1,5891 gold badge16 silver badges21 bronze badges

Comments

avalanche1 · Accepted Answer · 2019-10-03 12:08:21Z

2

  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.

answered Oct 3, 2019 at 12:08

avalanche1

3,7121 gold badge36 silver badges42 bronze badges

Comments

Omor Faruk · Accepted Answer · 2022-09-20 16:41:06Z

2

Convert string to number simple answer

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

answered Sep 20, 2022 at 16:41

Omor Faruk

679 bronze badges

Comments

Finnian Logan-Riley · Accepted Answer · 2023-05-03 04:01:48Z

2

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>

answered May 3, 2023 at 4:01

Finnian Logan-Riley

212 bronze badges

Comments

hossain45 · Accepted Answer · 2024-02-19 16:06:45Z

1

In case anyone having trouble with event.target.file, you can refer to the following code which solved my problem for my react project.

    const target = event.target as HTMLInputElement;
    const selectedFile: File = (target.files as FileList)[0];
    console.log("Selected File:", selectedFile, event);
  };

answered Feb 19, 2024 at 16:06

hossain45

4212 silver badges5 bronze badges

Comments

Vigil · Accepted Answer · 2025-09-25 11:13:52Z

1

None of the above worked for me with vainilla Javascript. Although it's a slightly different use case, I'll add this in case it's useful for somebody else. You can also use the following type:

e: Event & { target: HTMLInputElement }

This way you can directly use e.target.value in your handler function without getting any Typescript errors. And you also avoid casting the type this way (which is always better).

Full example:

onchange: (e: Event & { target: HTMLInputElement }) => {
    console.log(e.target.value)
}

answered Sep 25 at 11:13

Vigil

741 silver badge6 bronze badges

Comments

Keshav Gera · Accepted Answer · 2021-09-20 13:33:37Z

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

AndriyFM · Accepted Answer · 2022-09-19 02:55:15Z

0

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

this work for me.

answered Sep 19, 2022 at 2:55

AndriyFM

1,62318 silver badges12 bronze badges

Collectives™ on Stack Overflow

Typescript input onchange event.target.value

25 Answers 25

11 Comments

6 Comments

Comments

Comments

Comments

2 Comments

1 Comment

1 Comment

1 Comment

Comments

Comments

1 Comment

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

25 Answers 25

11 Comments

6 Comments

Comments

Comments

Comments

2 Comments

1 Comment

1 Comment

1 Comment

Comments

Comments

1 Comment

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related