Question

我有两个JS文件包含在页面中作为utility.js和utility1.js实用工具代码.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小提琴here，让我知道可能的解决方案。

Answer 1

如果组件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);
      });
    }
  }
})();

Answer 2

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

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

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

Answer 3

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

Answer 4

只需使用

this.refs.myTextInput

https://jsfiddle.net/e0cjqLu2/

ReactJS中已安装组件的findDOMNode

4 个答案: