title: React's getDOMNode always return component's root DOM node instead of reffed one
body: <p>I am struggling to use <em>refs</em> in React. They always return root DOM node of the component instead of reffed one. </p>
  
  <p>Please consider the following example:</p>
  
  <pre><code>  var AuthApp = React.createClass({
      onSubmitClick: function(event) {
        var usernameInput = this.getDOMNode(this.refs.username);
  
        // This logs root &lt;div&gt; instead of &lt;input&gt;, why???
        console.log(usernameInput); 
      },
  
  
      render: function() {
        return (
          &lt;div&gt;
            &lt;input type="text" ref="username"/&gt;
            &lt;input type="password" ref="password"/&gt;
            &lt;input type="submit" onClick={this.onSubmitClick} /&gt;
          &lt;/div&gt;
        );
      }
    });
  </code></pre>
  
  <p>I've inspected the code in excellent Chrome React addon, and it seems that <code>this.refs.username</code> properly reflects <code>&lt;input&gt;</code> tag:</p>
  
  <p><img src="https://i.stack.imgur.com/vAiIw.png" alt="screenshot of React/Chrome inspector"></p>
  
  <p>Something wrong happens when I call <code>this.getDOMNode</code> - it returns root <code>&lt;div&gt;</code> specified in <code>render()</code> instead of <code>&lt;input&gt;</code>.</p>
  
  <p>This code comes from React 0.12, but I've tried to do the same on 0.13 (I am aware of change to <code>React.findDOMNode()</code>) and I get the same result.</p>
  
  <p>What am I doing wrong?</p>