Question

例如，当我写下一个下拉类时，我的想法是这样的

EVENT.listener(document, 'click', function(e) {
     // hide all active dropdowns
});

var DropDown = React.createClass({
    onClick: function(e) {
        // toggle self
        e.stopProbagation();
    }
});

然而，反应和外界的事件是不同的;所以，上面的代码不会起作用。那么，如何处理呢？还是有另一种模式来写下拉列表？

Answer 1

componentDidMount是集成其他框架或本机调用的最佳位置，因为当调用componentDidMount时，React保证组件的真实DOM节点存在。

要获得与您的示例类似的功能，您可以在根React组件中实现该函数，并在那里侦听本机DOM事件。发生单击时，使用需要对点击作出反应的ref属性调用任何组件：

var RootComponent = React.createClass({
  componentDidMount: function() {
    document.addEventListener("click", this.hideOverlays, false);
  },

  componentWillUnmount: function() {
    document.removeEventListener("click", this.hideOverlays, false);
  },

  hideOverlays: function() {
    this.refs.dropdown.hide();
  },

  render: function() {
    return DropDown({ref: "dropdown"});
  }
});

var DropDown = React.createClass({
  getInitialState: function() {
    return {
      isVisible: false
    };
  },

  hide: function() {
    this.setState({isVisible: false});
  }

  render: function() {
    var style;
    if (!this.state.isVisible) style = {display: "none"};

    return React.DOM.div({style: style});
  };
});

处理响应事件和遗留库事件

1 个答案: