findDOMNode of mounted component in ReactJS

Question

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 (
      <p>
        Hello, <input type="text" ref="mytestinput" placeholder="Your name here" />!<br />
        It is {this.props.date.toTimeString()}
      </p>
    );
  }
});

setInterval(function() {
  React.render(
    <HelloWorld date={new Date()} />,
    document.getElementById('container')
  );
}, 1000);

Code for utility1.js

var MyComponent = React.createClass({
  handleClick: function() {
    // Explicitly focus the text input using the raw DOM API.
    React.findDOMNode(HelloWorld.refs.mytestinput).focus();
  },
  render: function() {
    // The ref attribute adds a reference to the component to
    // this.refs when the component is mounted.
    return (
      <div>
        <input type="text" ref="myTextInput" />
        <input
          type="button"
          value="Focus the text input"
          onClick={this.handleClick}
        />
      </div>
    );
  }
});

React.render(
  <MyComponent />,
  document.getElementById('container1')
);

The problem here is I want focus on input of HelloWorld Component of utility.js from utility1.js. I saw their is one method as findDOMNode for mounted components. But this code is not working for me. Can Somebody try this JS Fiddle here and let me know possible solution.

Answer 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);
      });
    }
  }
})();

Answer 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()
}

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

Answer 4

Just use

this.refs.myTextInput

https://jsfiddle.net/e0cjqLu2/