title: Child-to-parent data flow
body: <p>I'm new to React and still learning the basics. Looking at the tutorial here:</p>
  
  <p><a href="http://facebook.github.io/react/docs/tutorial.html#callbacks-as-props">http://facebook.github.io/react/docs/tutorial.html#callbacks-as-props</a></p>
  
  <p>It's explaining how to make a parent respond to events on a child. Here's the relevant bit of code:</p>
  
  <pre><code>var CommentBox = React.createClass({
    handleCommentSubmit: function(comment) {
      // TODO: submit to the server and refresh the list
    },
    render: function() {
      return (
        &lt;div className="commentBox"&gt;
          &lt;h1&gt;Comments&lt;/h1&gt;
          &lt;CommentList data={this.state.data} /&gt;
          &lt;CommentForm
            onCommentSubmit={this.handleCommentSubmit}
          /&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>And then in the CommentForm component:</p>
  
  <pre><code>var CommentForm = React.createClass({
    handleSubmit: function() {
      var author = this.refs.author.getDOMNode().value.trim();
      var text = this.refs.text.getDOMNode().value.trim();
      this.props.onCommentSubmit({author: author, text: text});
      this.refs.author.getDOMNode().value = '';
      this.refs.text.getDOMNode().value = '';
      return false;
    },
  }
  </code></pre>
  
  <p>If I'm understanding this correctly, instantiating a <code>&lt;CommentForm/&gt;</code> (without any attributes) would create a broken reference when <code>CommentForm.handleSubmit()</code> tries to call <code>this.props.onCommentSubmit()</code>. The parent must rather do <code>&lt;CommentForm onCommentSubmit={some.function}/&gt;</code>. Is this the official way to do child-to-parent data flow in React? Or is there a more loosely-coupled way? I guess I was hoping for something more akin to Backbone's <code>trigger()</code> and <code>on()</code> functions where one view can change which events it listens to without necessarily creating runtime errors in other views.</p>