title: How to set event handler in React sub-component
body: <p>I'm having trouble getting menu items connected to an event handler. Here's a mock of the UI showing state changes over time. It's a dropdown menu (via Bootstrap), with the root menu item showing the current selection:</p>
  
  <pre><code>[ANN]&lt;click  ...  [ANN]             ...    [BOB]&lt;click  ...  [BOB]  
                      [Ann]                                      [Ann]
                      [Bob]&lt;click + ajax                         [Bob]
                      [Cal]                                      [Cal]
  </code></pre>
  
  <p>The end goal is to change the page content asynchronously based on the user's selection. Clicking on Bob should trigger the <code>handleClick</code>, but it's not.</p>
  
  <p>As a side note, I'm not terribly happy with the way componentDidMount calls <code>this.handleClick();</code>, but it works for now as a way to get initial menu content from the server.</p>
  
  <pre class="lang-js prettyprint-override"><code>/** @jsx React.DOM */
  
  var CurrentSelection = React.createClass({
    componentDidMount: function() {
      this.handleClick();
    },
  
    handleClick: function(event) {
      alert('clicked');
      // Ajax details ommitted since we never get here via onClick
    },
    getInitialState: function() {
      return {title: "Loading items...", items: []};
    },
    render: function() {
      var itemNodes = this.state.items.map(function (item) {
        return &lt;li key={item}&gt;&lt;a href='#' onClick={this.handleClick}&gt;{item}&lt;/a&gt;&lt;/li&gt;;
      });
  
      return &lt;ul className='nav'&gt;
        &lt;li className='dropdown'&gt;
          &lt;a href='#' className='dropdown-toggle' data-toggle='dropdown'&gt;{this.state.title}&lt;/a&gt;
          &lt;ul className='dropdown-menu'&gt;{itemNodes}&lt;/ul&gt;
        &lt;/li&gt;
      &lt;/ul&gt;;
    }
  });
  
  
  $(document).ready(function() {
    React.renderComponent(
      CurrentSelection(),
      document.getElementById('item-selection')
    );
  });
  </code></pre>
  
  <p>I'm almost positive that my hazy understanding of javascript scoping is to blame, but everything I've tried so far has failed (including trying to pass the handler down through props).</p>