javascript - 在reactjs中切换下拉菜单

Question

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

index.html

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

导航菜单.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。为什么会这样，我该如何解决它，以便单击菜单按钮切换菜单并单击正文隐藏菜单？

如果这种方法看起来不对，我应该使用什么方法？我对 react 还很陌生，所以我仍在了解发生了什么以及为什么发生。

此外，我不能使用完整的 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});
    }
},

另一种方法(也是更好的方法)是让点击监听器不在 body 上，而是在 div 上，并使其尽可能大(基本上与 body 大小相同)。

这是一个将点击绑定(bind)到 div 而不是 body 上的示例:https://jsfiddle.net/jL3yyk98/