从并发事件重新渲染后，react-router停止路由

Question

I have a dropdown that is controlled via state .
Clicking on a button toggles it on. Clicking outside toggles it off.

The dropdown contains Links within my application, however, when the dropdown is being toggled off, route transition is prevented.

If autohide is disabled, routing works fine, however, it is desired to also hide the dropdown on route transition .

1. Please explain to me what is going on
2. Also please help me fix it

class App extends React.Component {
  state = {
    isNavShown: false
  }

  showNav = () => this.setState({isNavShown: true})

  hideNav = event => {
    // ... some more logic ...
    // don't hide if autoHide is disabled
    if (autoHide.checked === false) return

    this.setState({isNavShown: false})
  }

  componentDidMount() {
    document.addEventListener('mousedown', this.hideNav)
  }

  // ...
} 

I have also tried wrapping the setState in setTimeout , but to no avail.

Here is the full jsfiddle https://jsfiddle.net/nimareq/1kh47uey/

Answer 1

So the issue is that your hideNav function is hiding the nav if the user clicks anywhere outside of show navigation button and the checkbox you built. However, if the user clicks on the nav itself it will be hidden before you have a chance to navigate the user.

Essentially, the browser will detect the click event listener you made on the document before it bubbles down to the anchor tag click. By the time it gets there the anchor tag is gone. (I hope that makes sense lol)

Anyways you can easily solve it by adding the following to your hideNav function:

if(nav.contains(event.target)) return;

Also don't forget to add the id="nav" on your navbar or whatever else you want to call it. This way the navbar won't disappear when u click on the navbar. It will still disappear if you click off the navbar.