ReactJS中已安装组件的findDOMNode

Question

我在页面中包含了两个JS文件，分别是utility.JS和utility1.JS
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);

实用程序代码1.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')
);

这里的问题是，我想把重点放在utility1.js中utility.js的HelloWorld组件的输入上。我看到他们的方法是findDOMNode，用于挂载的组件。但这段代码对我不起作用。有人能在这里试试这个JS Fiddle并让我知道可能的解决方案吗。

Answer 1

您需要创建全局事件系统，以便允许两个组件在不处于父子关系的情况下相互通信。以下是有关全球事件系统的更多信息

以下是解决方案：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()
  },
  ...
});

或者，如果您的React.js是最新的，请使用以下内容：

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

Answer 3

Ref是在其上定义的组件的本地引用，因此HelloWorld.refs.mytestinput无效。此外，由于MyComponent和HelloWorld是两个不同React应用程序(由对React.render的两个不同调用创建(的一部分，因此没有从MyComponent访问HelloWorld中引用的内置方法。您需要设置某种对组件的全局引用，使用从一个应用程序传递到另一个应用的消息，发出某种指示输入应该集中的事件，或者使用其他"全局"通信方法。

Answer 4

只需使用

this.refs.myTextInput

https://jsfiddle.net/e0cjqLu2/