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函数会隐藏导航。但是，如果用户点击导航本身，则在您有机会导航用户之前，它将被隐藏。

从本质上讲，浏览器会在文档冒泡到锚标记点击之前检测到您在文档上创建的点击事件监听器。当它到达那里时，锚标记消失了。 （我希望这很有道理）

无论如何，你可以通过在hideNav函数中添加以下内容来轻松解决它：

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

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