React 0.13 this.getDOMNode() equivalent to React.findDOMNode()

Question

This works perfectly fine in React version 0.12:

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

The variable dom

Answer 1

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

Answer 2

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>

Answer 3

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.

Answer 4

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).

Answer 5

React 15.0.1 Requires this syntax: ReactDOM.findDOMNode

e.g.

var x = ReactDOM.findDOMNode(this.refs.author);