title: Do I need to bind event handlers to `this` with TypeScript + React?
body: <p>I have a component with a simple button handler method. If I don't bind the <code>onClick</code> handler to <code>this</code> in the constructor (or inline on the <code>onClick</code> itself), then I get an error because the context of the <code>handleAdd</code> method is not the instance where my component's state is...</p>
  
  <p>I understand how the <code>bind</code> works, but is there a workaround to avoid having to use <code>bind</code> all over the place with TypeScript + React?</p>
  
  <pre><code>export class TodoList extends React.Component&lt;ITodoListProps, Partial&lt;ITodoListState&gt;&gt; {
      constructor(props: ITodoListProps) {
          super(props);
          this.state = { items: props.items };
  
          this.handleAdd.bind(this);
      }
  
      public render() {
          return (
              &lt;div&gt;
                  &lt;button onClick={this.handleAdd}&gt;Add&lt;/button&gt;
                  &lt;ul&gt;
                      {this.state.items.map((todo, i) =&gt; {
                          return &lt;TodoItem key={i} name={todo.name} /&gt;
                      })}
                  &lt;/ul&gt;
              &lt;/div&gt;
          );
      }
  
      handleAdd(e: any) {
          this.setState({
              items: [...this.state.items, { name: "foo" }]
          });
      }
  }
  </code></pre>