43

This works perfectly fine in React version 0.12:

componentDidMount: function () {
    var dom = this.getDOMNode();
}

The variable dom gets the actual DOM node for the rendered component. However, converting this to React 0.13 does not work as expected:

componentDidMount: function () {
    var dom = React.findDOMNode();
    // dom is undefined
}

I tried React.findDOMNode(this) which does not work either. Basically I'm just trying to fetch the top-level dom node rendered by the render function without using a ref. Is this possible?

eriklharper
  • 2,882
  • 5
  • 25
  • 28

5 Answers5

57

Update React v0.14+

In React v0.14+ this has changed, you should now use the react-dom module:

import ReactDOM from 'react-dom';

ReactDOM.findDOMNode(this);

ES6

class Test extends React.Component {
  componentDidMount() {
    const element = ReactDOM.findDOMNode(this);
    console.log(element);
    alert(element);
  }
  
  render() {
    return (
      <div>test</div>
    );
  }
}

ReactDOM.render(<Test />, document.getElementById('r'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<div id="r" />

ES5

var Test = React.createClass({
  componentDidMount: function() {
    var dom = ReactDOM.findDOMNode(this);
    console.log(dom);
    alert(dom);
  },
  render: function() {
    return React.createElement('div', null, 'test');
  }
});

ReactDOM.render(React.createElement(Test), document.getElementById('r'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<div id="r" />

React v0.13 and below

Passing this as the parameter should definitely work:

React.findDOMNode(this);

If not, something else may be going on. See demo below:

var Test = React.createClass({
  componentDidMount: function() {
    var dom = React.findDOMNode(this);
    console.log(dom);
    alert(dom);
  },
  render: function() {
    return React.DOM.div(null, 'test');
  }
});

React.render(React.createElement(Test), document.getElementById('r'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react.js"></script>
<div id="r"></div>
Austin Greco
  • 32,997
  • 6
  • 55
  • 59
42

Note that as of React v0.14

React.findDOMNode becomes ReactDom.findDOMNode(this); where

var ReactDom = require('react-dom');

As explained in https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html

Emile
  • 11,451
  • 5
  • 50
  • 63
17

React 15.0.1 Requires this syntax: ReactDOM.findDOMNode

e.g.

var x = ReactDOM.findDOMNode(this.refs.author);
Damian Green
  • 6,895
  • 2
  • 31
  • 43
2

For more complex elements like React components created on standard DOM elements refs give us only first DOM element ( root element of component ) so sometimes we need to find desired node inside it. Good example is Material-Ui TextField component and how we can get value from it.

1.Required imports

import React, { Component } from 'react';
import TextField from 'material-ui/TextField';
import ReactDOM from 'react-dom';

2.Virtual dom and ref="variable"

 <TextField floatingLabelText="Some title" ref="title" />

3.Query inside TextField:

ReactDOM.findDOMNode(this.refs.title).querySelector("input").value

or for multiline:

ReactDOM.findDOMNode(this.refs.title).querySelector("textarea").value

We start from TextField container and using standard DOM query querySelector get wanted input element. This solution is working with any complexed components, we always can query inside it. Tested on React (15.3.2).

Maciej Sikora
  • 19,374
  • 4
  • 49
  • 50
0

I think that you don't need to use ReactDOM.findDOMNode, you can use simple e.target.innerHTML. In this option you don't need to import ReactDOM.

kris_IV
  • 2,396
  • 21
  • 42