Реактивный маршрутизатор останавливает маршрутизацию после повторного рендеринга из одновременного события

Question

У меня есть выпадающий список, который контролируется с помощью state.
Нажатие на button включает его. Щелчок снаружи выключает его.

Раскрывающийся список содержит ссылки внутри моего приложения, однако при его отключении переход по маршруту запрещается.

Если автоматическое скрытие отключено, маршрутизация работает нормально, однако также желательно скрыть раскрывающийся список при переходе по маршруту .

1. Пожалуйста, объясните мне, что происходит
2. Также, пожалуйста, помогите мне исправить это

1020 *
*

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 скрывает навигацию, если пользователь нажимает где-либо за пределами кнопки навигации и показанного вами флажка. Однако, если пользователь нажимает на навигационную кнопку, она будет скрыта, прежде чем у вас будет возможность перемещаться по пользователю.

По сути, браузер обнаружит прослушиватель событий щелчка, который вы сделали для документа, прежде чем он перейдет к щелчку тега привязки. К тому времени, когда он туда доберется, тег привязки исчезнет. (Я надеюсь, что это имеет смысл, LOL)

В любом случае вы можете легко решить эту проблему, добавив в свою функцию hideNav следующее:

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

Также не забудьте добавить id = "nav" на вашу навигационную панель или как угодно, как хотите. Таким образом, панель навигации не исчезнет, ​​когда вы нажмете на панель навигации. Он все равно исчезнет, ​​если вы нажмете на панель навигации.