title: Typescript types for React checkbox events and handlers?
body: <p>I'm building something like <a href="https://facebook.github.io/react/docs/lifting-state-up.html" rel="noreferrer">this React example</a> 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.</p>
  
  <p>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 <code>React.MouseEvent&lt;HTMLInputElement&gt;</code>, but that's just guesswork... </p>
  
  <p><strong>Parent component</strong> 
  create imageRows and pass the handler:</p>
  
  <pre><code>render() {
    &lt;div&gt;
      &lt;ImageRow key={el.url} onChange={this.onChange}/&gt;
    &lt;/div&gt;
   }
   // what should the type of e be?
   onChange(e:any){
   }
  </code></pre>
  
  <p>And the ImageRow component</p>
  
  <pre><code>export interface ImageRowProps { 
    genre: Array&lt;number&gt;
    url: string
    onChange : any // what is the type of the callback function?
  }
  
  export class ImageRow extends React.Component&lt;ImageRowProps&gt; {
    render() {
      return &lt;div className="imagerow"&gt;
          &lt;input type="checkbox" key={index} onChange={this.props.onChange} defaultChecked={(num == 1)}/&gt;
      &lt;/div&gt;
  }
  </code></pre>
  
  <p><strong>EDIT</strong></p>
  
  <p>The similar question only shows the event type, not the handler type. When I change the event type:</p>
  
  <pre><code>onChange(e: React.FormEvent&lt;HTMLInputElement&gt;){
      console.log(e.target.value)
  }
  </code></pre>
  
  <p>I get this error:</p>
  
  <pre><code>Property 'value' does not exist on type 'EventTarget'.
  </code></pre>