ReactJS中已安装组件的findDOMNode答案

【问题标题】：findDOMNode of mounted component in ReactJSReactJS中已安装组件的findDOMNode
【发布时间】：2015-08-10 09:45:39
【问题描述】：

我在页面中包含了两个 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);

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')
);

这里的问题是我想关注来自utility1.js 的utility.js 的HelloWorld 组件的输入。我看到它们是安装组件的一种方法 findDOMNode 。但是这段代码对我不起作用。有人可以试试这个 JS Fiddle here 并让我知道可能的解决方案。

【问题讨论】：

标签： javascript validation input components reactjs

【解决方案1】：

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

或者如果你的 React.js 是最新的，使用这个：

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

【讨论】：

【解决方案2】：

随便用

this.refs.myTextInput

https://jsfiddle.net/e0cjqLu2/

【讨论】：

【解决方案3】：

您需要创建全局事件系统以允许两个组件communicate with each other（如果它们不是父子关系）。这里有更多关于global event system的信息

这里是解决方案：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);
      });
    }
  }
})();

【讨论】：

你能解释一下这个订阅和通知是如何工作的吗？ notify 方法中的 cb(data) 是什么。
这只是一个基本的例子。您应该开发自己的事件系统。
Subscribe(name, cb) 将注册事件 (name) 和事件处理程序 (cb)。 notify 用于执行这些事件，并将数据从一个组件传递到另一个组件。在这种情况下，您使用 subscribe 在 HelloWorld 组件中创建一个事件侦听器 (foo)。每当你调用 notify(foo,'focus') 时，它都会执行 foo 函数。此处的 cb(data) 用于将数据从远程组件传递到其他组件的事件处理程序。老实说，我的例子并不好，但我希望它能帮助你掌握全局事件系统的概念。

【解决方案4】：

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

【讨论】：