javascript - 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();
    }}
/>

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

...

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

---

更新

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

---

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

Answer 1

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

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

这里有一个 fiddle 来演示:https://jsfiddle.net/bp80sg7w/2/