title: React.js: attach event from parent to children
body: <p>as shown in the example below, I'd like MyComponent to dynamically attach an "onClick" event to its children. The onClick event should fire alertView that should be able to call the clicked element method "getValue".</p>
  
  <p>JSFiddle: <a href="http://jsfiddle.net/2g638bp8/" rel="noreferrer">http://jsfiddle.net/2g638bp8/</a></p>
  
  <p>How to do this? Thanks</p>
  
  <pre><code>var MyComponent = React.createClass({
      alertValue: function () {
          // RETRIEVE THE CHILD HERE
          alert(child.getValue());
      },
      render: function () {
          var children = React.Children.map(this.props.children, function (c, index) {
              return React.addons.cloneWithProps(c, {
                  ref: 'child-' + index
              });
          });
          return (
              &lt;div&gt;
                  {children}
              &lt;/div&gt;
          );
      }
  });
  
  var MySubComponent = React.createClass({
      getValue: function () {
          return this.props.val;
      },
      render: function () {
          return (
              &lt;div&gt;{this.props.val}&lt;/div&gt;
          );
      }
  });
  
  React.render(
      &lt;div&gt;
          &lt;MyComponent&gt;
              &lt;MySubComponent val="1" /&gt;
              &lt;MySubComponent val="2" /&gt;
              &lt;MySubComponent val="3" /&gt;
          &lt;/MyComponent&gt;
      &lt;/div&gt;,
      document.getElementById('container')
  );
  </code></pre>