Typescript input onchange event target value

Question

In my react and typescript app  I use  onChange   e    gt  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 lt Input gt            export class Input extends React Component lt InputProps     gt        If I put target    value  string    I get    ERROR in  default   react-onsenui d ts 87 18 Interface  InputProps  incorrectly extends interface  HTMLProps lt Input gt      Types of property  target  are incompatible      Type    value  string     is not assignable to type  string

User · Answer

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;

User · Answer

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 lt T gt  extends React FormEvent lt T gt        target  MyEventTarget    interface InputProps extends React HTMLProps lt Input gt        onChange   React EventHandler lt MyFormEvent lt Input gt  gt       Once you have those classes  you can use your input component as   lt Input onChange  e   gt  alert e target value     gt    without compile errors  In fact  you can also use the first two interfaces above for your other components

User · Answer

When using Child Component We check type like this  Parent Component  export default      gt       const onChangeHandler     e  React ChangeEvent lt HTMLInputElement gt    void   gt        console log e currentTarget value         return        lt div gt         lt Input onChange  onChangeHandler    gt       lt  div gt          Child Component  type Props       onChange   e  React ChangeEvent lt HTMLInputElement gt     gt  void    export Input React FC lt Props gt    onChange     gt       lt input type  quot tex quot  onChange  onChange    gt

User · Answer

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 lt HTMLInputElement gt     event    gt        console log event target value

User · Answer

lucky i find a solution  you can     import   ChangeEvent   from  react     and then write code like  e ChangeEvent lt HTMLInputElement gt

User · Answer

I use something like this  import   ChangeEvent  useState   from  react     export const InputChange        gt      const  state  setState    useState   value            const handleChange    event  ChangeEvent lt   value  string   gt     gt        setState   value  event  currentTarget  value           return        lt div gt         lt input onChange  handleChange    gt         lt p gt  state  value  lt  p gt       lt  div gt

User · Answer

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

User · Answer

as HTMLInputElement works for me

User · Answer

This is when you re working with a FileList Object   onChange   event  React ChangeEvent lt HTMLInputElement gt    void   gt      const fileListObj  FileList   null   event target files    if  Object keys fileListObj as Object  length  gt  3        alert  Only three images pleaseeeee           else          Do something        return

User · Answer

function handle change      evt  React ChangeEvent lt HTMLInputElement gt       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

User · Answer

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

User · Answer

Generally event handlers should use e currentTarget value  e g    onChange    e  React FormEvent lt HTMLInputElement gt     gt        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   onChange    e  React ChangeEvent lt HTMLInputElement gt    gt       const newValue   e target value

[reactjs] Typescript input onchange event.target.value

Examples related to reactjs

Examples related to typescript

Examples related to types

Examples related to typescript-typings