React's getDOMNode always return component's root DOM node instead of reffed one

Question

I am struggling to use refs in React. They always return root DOM node of the component instead of reffed one.

Please consider the following example:

  var AuthApp = React.createClass({
    onSubmitClick: function(event) {
      var usernameInput = this.getDOMNode(this.refs.username);

      // This logs root <div> instead of <input>, why???
      console.log(usernameInput); 
    },


    render: function() {
      return (
        <div>
          <input type="text" ref="username"/>
          <input type="password" ref="password"/>
          <input type="submit" onClick={this.onSubmitClick} />
        </div>
      );
    }
  });

I've inspected the code in excellent Chrome React addon, and it seems that this.refs.username properly reflects <input> tag:

Something wrong happens when I call this.getDOMNode - it returns root <div> specified in render() instead of <input>.

This code comes from React 0.12, but I've tried to do the same on 0.13 (I am aware of change to React.findDOMNode()) and I get the same result.

What am I doing wrong?

Answer 1

You should be using

var usernameInput = React.findDOMNode(this.refs.username);

to get a reference to the component's DOM node using refs.

The getDOMNode method has been deprecated

getDOMNode is deprecated and has been replaced with React.findDOMNode().