单击主体以更改状态以响应关闭下拉菜单

Question

我编写了一个简单的下拉菜单，因为我想使用不同的样式并具有对行为的更多控制权，但是现在，当用户在主体或其他元素上的其他位置单击时，我仍然无法关闭下拉菜单。 我如何通过纯粹的反应来实现？

var Hello = React.createClass({
  getInitialState() {
     return {
        openDropdown: false
     }
  },

  toggleDropdown: function() {
     this.setState({
         openDropdown: !this.state.openDropdown
     })
  },

  render: function() {
    return (
        <ul>
        <p onClick={this.toggleDropdown.bind(this)}>Select</p>
        <div className={this.state.openDropdown ? 'show' : 'hide'}>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        </div>
      </ul>

    )
  }
});

https://jsfiddle.net/1z5zpqeo

Answer 1

加载组件时，将事件侦听器添加到主体。

componentDidMount: function() {
  document.body.addEventListener('click', this.closeDropdwn);
},

closeDropdwn: function() {
  this.setState({
    openDropdown: false,
  })
},

Answer 2

为了更好地理解，我重命名了您的状态，并且将您在render上的div更改为ul，li元素不应位于ul之外的任何其他元素内。

此外，还有更多的拆分操作，因此如果需要的话，更容易调试。

var Hello = React.createClass({
    getInitialState() {
        return {
            isOpenDropdown: false //rename for better understanding
        }
    },

    toggleDropdown: function(e) {
        if(e && ReactDOM.findDOMNode(this.refs.dropdown).contains(e.target)) {
            return; //Ignore click if it was inside the dropdown
    }
    this.state.isOpenDropdown ? this.closeDropdown() : this.openDropdown()
},

openDropdown: function() {
    document.addEventListener("click", this.closeDropdown);
    this.setState({
        isOpenDropdown: true
    });
},

closeDropdown: function() {
    document.removeEventListener("click", this.closeDropdown);
    this.setState({
        isOpenDropdown: false
    });
}

componentWillUnmount: function() {
    if(this.state.isOpenDropdown){
        document.removeEventListener("click", this.closeDropdown);
    }
}

render: function() {
    //Changed "div" to "ul" -- LI should never be inside any element other than UL.
    return (
        <div>
        <p onClick={this.toggleDropdown.bind(this)}>Select</p>
        <ul className={this.state.isOpenDropdown ? 'show' : 'hide'}> 
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        </ul>
        </div>

        )
}
});