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

Question

我有一个通过state控制的下拉菜单。
单击button将其打开。单击外部将其关闭。

该下拉列表包含我的应用程序中的链接，但是，当关闭该下拉列表时，将阻止路由转换。

如果禁用了自动隐藏，则路由工作正常，但是，还希望在路由转换时隐藏下拉菜单。

  

  
1. 请向我解释发生了什么
  
2. 也请帮我修复它
  

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

  // ...
} 

我也尝试过将setState包装在setTimeout中，但无济于事。

这是完整的jsfiddle https://jsfiddle.net/nimareq/1kh47uey/

Answer 1

因此，问题在于，如果用户单击“显示导航”按钮和所构建的复选框之外的任何位置，则hideNav函数将隐藏导航。但是，如果用户单击导航本身，则导航将被隐藏，然后才有机会导航用户。

从本质上讲，浏览器将检测到您在文档上创建的click事件监听器，然后气泡到锚标签单击。等到到达锚标签时，锚标签就消失了。 （我希望这很有道理）

无论如何，您可以通过将以下内容添加到hideNav函数中来轻松解决该问题：

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

也不要忘记在导航栏或其他任何您想调用的名称上添加id =“ nav”。这样，当您单击导航栏时，导航栏不会消失。如果您单击导航栏，它将仍然消失。