Toggle dropdown menu in reactjs

Question

I have the following code for a simple dropdown menu on my navbar: 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'));

I understand with my current code that both the toggleMenu method and onClose method are called when the user clicks the menu button to close the menu (since they are also effectively clicking the body); and that the onClose method is called first, meaning that the state is set to false, but then the toggleMenu method is called and it's set back to true. Why is this, and how can I fix it so that clicking the menu button toggles the menu and clicking the body hides the menu?

If this approach seems wrong what approach should I be using? I'm fairly new to react so I'm still learning what goes where and why.

Also, I cannot use a full body div as the solution to this, it needs to be a typical dropdown; so if users want to interact with another part of the page (maybe clicking a link), then they can do that.

Please specify all the code needed for a jsfiddle. It makes it easier for us. I think your issue is that you change the state in handleClick only if it is not opened. So it goes only one way: non-open to open, but you also need to check the other way. I would remove the if statement. — Jeremy D
– Jeremy D, Commented May 9, 2015 at 17:17
Extra code added. That if statement actually doesn't change anything (I thought it would), so with or without it the dropdown still doesn't disappear when the menu button is clicked. — user2442241
– user2442241, Commented May 9, 2015 at 17:44
The code is still not working out of the box. Still has issues with hasSignedInm accountpage and so on. Please give a minimal code to test — Jeremy D
– Jeremy D, Commented May 9, 2015 at 17:46

Jeremy D · Accepted Answer · 2015-05-09 18:26:25Z

3

Your issue is that clicking on the link will also call the body click listener. It means that your state will go from:

Click on link
Click listener on body called
This.state.open set to false
Render called with this.state.open false
Click listener on the link called
This.state.open set to true
Render called with this.state.open true

e.stopPropagation() doesn't work in React. One workaround would be to:

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

Another way (and better way) would be to have the click listener not on body, but on a div, and make it as big as possible (to be as the same size a body basically).

Here is an example with binding a click on a div instead of body: https://jsfiddle.net/jL3yyk98/

edited May 9, 2015 at 18:26

answered May 9, 2015 at 18:20

Jeremy D

4,8551 gold badge34 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2442241 Over a year ago

Unfortunately this does not solve my problem. I would *really rather not have a full body div, so that users can still say, click on links and what not and not be forced to click once to remove the div and then click again to actually use said link. So with that being said, the code you posted above doesn't work since the menu button is wrapped in an anchor tag. I'm open to new methods of toggling options in React, if this one isn't the way to do it, but I think there is a way and I'm just missing it.

Jeremy D Over a year ago

I just gave you an answer about what was wrong with an explanation. Sorry if it doesn't solve your problem I was just hoping it would help as I basically did your debugging :)

CooCoo · Accepted Answer · 2015-09-25 06:47:54Z

0

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);
},

this work on the latest chrome, you can also use the jQuery rewrite the node.contains()

answered Sep 25, 2015 at 6:47

CooCoo

1

Collectives™ on Stack Overflow

Toggle dropdown menu in reactjs

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related