title: React refs with components
body: <p>I have React form that has a Component used to render a drop down because the options are coming from an API. However, I can't access the ref for the embedded component. I'm putting together my first form and trying to understand the best way to approach this.</p>
  
  <pre><code>var ActivityForm = React.createClass({
    handleSubmit: function(e) {
      e.preventDefault();
  
      var noteCategoryId = this.refs.note_category_id.getDOMNode().value.trim();
      var content = this.refs.content.getDOMNode().value.trim();
  
      if (!category || !content) {
        return;
      }
  
      // this.props.onCommentSubmit({author: author, text: text});
  
      this.refs.note_category_id.getDOMNode().value = '';
      this.refs.content.getDOMNode().value = '';
      return;
    },
    render: function() {
      return (
        &lt;div className="new-activity"&gt;
          &lt;h3&gt;New Activity&lt;/h3&gt;
          &lt;form onSubmit={this.handleSubmit}&gt;
            &lt;textarea ref='content' /&gt;
            &lt;br /&gt;
  
            &lt;label&gt;Category&lt;/label&gt;
            &lt;ActivityFormCategoryDropdown /&gt; # THE REF IN THIS COMPONENT ISN'T ACCESSIBLE
            &lt;br /&gt;
  
            &lt;input type="submit" value="Add Activity" /&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      );
    }
  });
  </code></pre>