React-router 不使用输入 onBlur 事件更改路由

Question

我正在将 React、Redux 和 React Router 用于应用程序，但在使用 onBlur 输入事件和路由更改时遇到问题。

我有一个显示内部链接列表的“SearchResults”组件。 SearchResults 仅在状态 searchActive 为真时显示。

<div>
    {props.searchActive ? <SearchResults /> : props.children}
</div>

SearchResults 有一个循环呈现的链接列表...

<Link key={Math.random()} to={r.path}>{r.name}</Link>

搜索的输入（另一个独立组件）在onFocus 事件期间将searchActive 设置为true，在onBlur 事件期间设置false。

<input
    onFocus={() => {
        // dispatch Redux action (set "searchActive" to true)
        props.startSearch();
    }}
    onBlur={() => {
        // dispatch Redux action (set "searchActive" to false)
        props.endSearch();
    }}
/>

使用此设置，当我点击Link 时，路径不会改变。但是，如果包含 setTimeout，我会得到所需的行为。

...

    setTimeout(() => {
        props.endSearch();
    }, 400)
...

---

更新

onBlur 操作隐藏了 SearchResults 组件，而不是注册 Link 点击。有什么方法可以在执行onBlur 操作之前注册链接点击？

---

当我在 onBlur 回调中调度 Redux 操作时，为什么 react-router 没有在 Link 上注册路由更改？

Answer 1

很简单，因为在注册click 事件之前触发了onBlur 事件，即您的链接在它确认被点击之前就从DOM 中消失了。

onMouseDown 事件在 onBlur 事件之前触发，因此如果您使用它来启动导航，则不需要魔法超时。

这里有一个小提琴来演示：https://jsfiddle.net/bp80sg7w/2/