Typescript types for React checkbox events and handlers?

Question

I'm building something like this React example in Typescript. The goal is to have a parent that has a state, and it creates several stateless child components that pass their clicks back to the parent.

Since the example is in Javascript I have no idea what the types of the input box events and the onChange handlers are...? I've tried several options like React.MouseEvent<HTMLInputElement>, but that's just guesswork...

Parent component create imageRows and pass the handler:

render() {   <div>     <ImageRow key={el.url} onChange={this.onChange}/>   </div>  }  // what should the type of e be?  onChange(e:any){  } 

And the ImageRow component

export interface ImageRowProps {    genre: Array<number>   url: string   onChange : any // what is the type of the callback function? }  export class ImageRow extends React.Component<ImageRowProps> {   render() {     return <div className="imagerow">         <input type="checkbox" key={index} onChange={this.props.onChange} defaultChecked={(num == 1)}/>     </div> } 

EDIT

The similar question only shows the event type, not the handler type. When I change the event type:

onChange(e: React.FormEvent<HTMLInputElement>){     console.log(e.target.value) } 

I get this error:

Property 'value' does not exist on type 'EventTarget'. 

Answer 1

When in doubt let it infer it for you by using an arrow in position e.g.

Answer

In your case e is React.ChangeEvent<HTMLInputElement>.

Answer 2

In our application,

console.log(event.target.value); // Not Working (Blank value)

console.log(event.target.checked); // Working Fine ( true / false )

//../src/components/testpage2/index.tsx  import * as React from 'react'; import {  TestInput } from '@c2/component-library';  export default class extends React.Component<{}, {}> {     state = {                 model: {                     isUserLoggedIn: true                 }                         };      onInputCheckboxChange = (event: React.ChangeEvent<HTMLInputElement>) => {         console.log(event.target.value); // Not Working         console.log(event.target.checked); // Working          const field = event.target.name;         const model = this.state.model;               model[field] = event.target.checked;          return this.setState({model: model});     };      render() {         return (             <div>                 <TestInput name="isUserLoggedIn" label="Is User LoggedIn : " type="checkbox" onChange={this.onInputCheckboxChange} />             </div>         );     } }  //=============================================================//  import * as React from 'react'; //import * as cs from 'classnames';  export interface TestInputProps extends React.HTMLAttributes<HTMLInputElement> {     name: string;     label: string;     onChange: React.ChangeEventHandler<HTMLInputElement>;     placeholder?: string;     value?: string;     type?: string;     error?: string;     className?: string; }  export const TestInput : React.SFC<TestInputProps> = ({ name, label, onChange, placeholder, value, type, className, error, ...rest }) => {     let wrapperClass:string = 'form-group';     if (error && error.length > 0) {       wrapperClass += " " + 'has-error';     }      return (         <div className={wrapperClass}>             <label htmlFor={name}>{label}</label>             <div className="field">                 <input                 type={type}                 name={name}                 className="form-control"                 placeholder={placeholder}                 value={value}                 onChange={onChange}/>                 {error && <div className="alert alert-danger">{error}</div>}             </div>         </div>     ); }  TestInput.defaultProps ={     type: "text" }