FindDOMNode Of Mounted Component In ReactJS

I have two JS files included in page as utility.js and utility1.js Code for utility.js var HelloWorld = React.createClass({ render: function() { return (

Solution 1:

You need to create the global event system in order to allow both components communicate with each other if they are not in parent-child relationship. Here is more information about global event system

Here is the solution: jsfiddle

var CustomEvents = (function() {
  var _map = {};

  return {
    subscribe: function(name, cb) {
      _map[name] || (_map[name] = []);
      _map[name].push(cb);
    },

    notify: function(name, data) {
      if (!_map[name]) {
        return;
      }

      // if you want canceling or anything else, add it in to this cb loop
      _map[name].forEach(function(cb) {
        cb(data);
      });
    }
  }
})();

Solution 2:

var HelloWorld = React.createClass({
  componentDidMount: function() {
    React.findDomNode(this.refs.mytestinput).focus()
  },
  ...
});

or if your React.js is up-to-date, use this:

componentDidMount() {
  this.refs.mytestinput.focus()
}

Solution 3:

Refs are local to the component they are defined on, so HelloWorld.refs.mytestinput is not valid. Furthermore, since MyComponent and HelloWorld are part of two different React applications (created by two different calls to React.render), there's no built-in way to access the refs in HelloWorld from MyComponent. You would need to set some kind of global reference to the component, use message passing from one app to the other, emit events of some kind indicating the input should be focused, or use some other method of "global" communication.

Solution 4:

Just use

this.refs.myTextInput

https://jsfiddle.net/e0cjqLu2/