I am struggling to use refs in React. They always return root DOM node of the ponent 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 es 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?

I am struggling to use refs in React. They always return root DOM node of the ponent 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 es 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?

• javascript
• reactjs

• Others here have given you the correct answer, I'd just like to add that this.getDOMNode() in a ponent does not take any arguments. Which is why you always get the ponents DOM node back, regardless of what you pass to it. – Anders Ekdahl Commented Apr 27, 2015 at 13:43

3 Answers 3

You should be using

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

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

The getDOMNode method has been deprecated

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

You should use this.refs['username'].getDOMNode(). But maybe in newer versions of React you better use React.findDOMNode, as adeneo adviced.

To expand on adeneo's answer, instead of doing React.findDOMNode(this.refs.username) you can simply do this.refs.username because the ref that is returned is the DOM Node.

See this link for the reference: https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html#dom-node-refs