在reactjs中切换下拉菜单

Question

我的导航栏上的简单下拉菜单有以下代码： https ： //jsfiddle.net/jL3yyk98/10/

的index.html

<div id="menu-button"></div>

NavMenu.js

var NavMenu = React.createClass({
    getDefaultProps: function()
    {
        return {
            isOpen: false
        };
    },

    render: function()
    {
        if (this.props.isOpen)
        {
            return (
                <div className="dropdown">
                    <ul>
                        <li><a href="#">News</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Guidelines</a></li>
                        <li><a href="#">Exchange</a></li>
                        <li><a href="#">Forum</a></li>
                    </ul>
                </div>
            );
        }
        return null;
    }
});

NavMenuButton.js

var NavMenuButton = React.createClass({

    getInitialState: function()
    {
        return {
            isOpen: false
        };
    },

    toggleMenu: function(e)
    {
        e.stopPropagation();
        this.setState({isOpen: !this.state.isOpen});
    },

    onClose: function()
    {
        this.setState({isOpen: false});
    },

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

    componentWillUnmount: function ()
    {
        document.body.removeEventListener('click', this.onClose);
    },

    render: function()
    {
        return (
            <div>
                <a onClick={this.toggleMenu} href="#">Menu</a>
                <NavMenu isOpen={this.state.isOpen} />
            </div>
        );
    }

});

React.render(<NavMenuButton />, document.getElementById('menu-button'));

我理解当前的代码，当用户单击菜单按钮关闭菜单时，调用toggleMenu方法和onClose方法（因为它们也有效地点击了主体）; 并且首先调用onClose方法，意味着将状态设置为false，然后调用toggleMenu方法并将其设置回true。 为什么这样，以及如何修复它以便单击菜单按钮切换菜单并单击正文隐藏菜单？

如果这种方法出现错误，我应该使用哪种方法？ 我是新手，所以我仍然在学习什么在哪里以及为什么。

另外，我不能使用全身div作为解决方案，它需要是一个典型的下拉列表; 因此，如果用户想要与页面的其他部分进行交互（可能点击链接），那么他们就可以做到这一点。

Answer 1

您的问题是单击该链接还将调用正文单击侦听器。 这意味着你的州将来自：

1. 点击链接
2. 单击身体上的侦听器
3. This.state.open设置为false
4. 渲染使用this.state.open调用false
5. 单击名为的链接上的侦听器
6. This.state.open设置为true
7. 使用this.state.open调用渲染为true

e.stopPropagation（）在React中不起作用。 一个解决方法是：

handleBodyClick: function(e)
{
    if (e.target.nodeName !== 'A') {
       this.setState({isOpen: false});
    }
},

另一种方式（更好的方法）是让点击侦听器不在主体上，而是在div上，并使其尽可能大（基本上与主体的大小相同）。

这是一个绑定div而不是body的示例 ： https ： //jsfiddle.net/jL3yyk98/

Answer 2

handleClose: function() {
  this.setState({isOpen: false});
},

handleGlobalClick: function(event) {
  var _con = this.refs.mC.getDOMNode() // <component ref="mC">
  if (!(_con == event.target) && !_con.contains(event.target)) {
    this.handleClose();
  }
},

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

componentWillUnmount: function() {
  document.body.removeEventListener('click', this.handleGlobalClick);
},

这个关于最新chrome的工作，你也可以用jQuery重写node.contains（）