title: React: event bubbling through nested components
body: <p>Let's say I have nested components like this:</p>
  
  <pre><code>&lt;root /&gt;
    &lt;comp1 /&gt;
      &lt;comp2 /&gt;
        &lt;target id={this.props.id}&gt;
          &lt;div&gt;click me&lt;/div&gt;
  </code></pre>
  
  <p>I want to make clicking on target run a function on root:</p>
  
  <pre><code>//on root component
  this.action = function(id){}
  </code></pre>
  
  <p>Do I need to do manually set a property on every component in the chain, like in the React tutorial example? <a href="https://jsfiddle.net/reactjs/n47gckhr/light/">Jsfiddle</a></p>
  
  <pre><code>&lt;root /&gt;
    &lt;comp1 clickHandler={this.action}/&gt;
      &lt;comp2 clickHandler={this.clickHandler}/&gt;
        &lt;target id={this.props.id} clickHandler={this.clickHandler} /&gt;
          &lt;div onClick={this.props.clickHandler.bind(this, this.props.id)}&gt;click me&lt;/div&gt;
  </code></pre>
  
  <p>Or is there some way to bubble the events up like in normal DOM?</p>