Good ReactDOM.findDOMNode

refs find dom node example

by Rich Costello

HTML

<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
<div id="container"></div>

JavaScript

var Comp = React.createClass({
  render: function () {
    return React.createElement(
      'span',
      {id: this.props.id},
      this.props.children
    );
  }
});

var Wrapper = React.createClass({
  render: function () {
    return React.createElement(
      'div',
      {id : this.props.id + '.wrapper'},
      React.createElement(
        Comp,
        {id: this.props.id + '.wrapper', ref: 'comp'},
        this.props.text
      )
    );
  },

  componentDidMount: function () {
  	(ReactDOM.findDOMNode(this.refs.comp)).onmouseover = function () {
      (ReactDOM.findDOMNode(this.refs.comp)).style.textDecoration = 'underline';
    }.bind(this);
    (ReactDOM.findDOMNode(this.refs.comp)).onmouseout = function () {
      (ReactDOM.findDOMNode(this.refs.comp)).style.textDecoration = 'none';
    }.bind(this);
    (ReactDOM.findDOMNode(this.refs.comp)).onmousedown = function () {
      (ReactDOM.findDOMNode(this.refs.comp)).style.color = 'red';
    }.bind(this);
    (ReactDOM.findDOMNode(this.refs.comp)).onmouseup = function () {
      (ReactDOM.findDOMNode(this.refs.comp)).style.color = 'black';
    }.bind(this);
    (ReactDOM.findDOMNode(this.refs.comp)).style.cursor = 'pointer';
  }

});

var node = React.createElement(
  Wrapper,
  {id: 'n1', text: 'Hello World!'}
);

ReactDOM.render(node, document.getElementById('container'));