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

Question

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

下拉菜单包含我的应用程序中的链接，但是，当关闭下拉菜单时，路径转换被阻止。

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

Please explain to me what is going on

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

  // ...
}

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

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

Answer 1

所以问题在于，如果用户单击显示导航按钮和您构建的复选框之外的任何位置，您的 hideNav 函数将隐藏导航。但是，如果用户单击导航本身，它将在您有机会导航用户之前被隐藏。

从本质上讲，浏览器会检测您在文档上创建的点击事件侦听器，然后才会冒泡到锚标记点击。当它到达那里时，锚标签已经消失了。（我希望这是有道理的，哈哈）

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

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

另外不要忘记在您的导航栏上添加 id="nav" 或任何您想要调用的名称。这样当你点击导航栏时导航栏不会消失。如果您单击导航栏，它仍然会消失。

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

react-router stops routing after rerender from a concurrent event

javascript

reactjs

react-router-v4