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

Question

我正在为应用程序使用React,Redux和React路由器,并且在使用onBlur输入事件和路由更改时遇到问题.

我有一个"SearchResults"组件,它显示了一个内部链接列表.SearchResults仅显示状态searchActive为真时.

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

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

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

用于搜索(另一个独立的分量)的输入设置searchActive到true在onFocus事件和false用于onBlur事件.

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

通过此设置,当我单击a时Link,路径不会更改.但是,如果包含a setTimeout,我会得到所需的行为.

...

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

---

更新

该onBlur操作隐藏了SearchResults组件而未注册该Link单击.在执行onBlur操作之前,有什么方法可以注册链接点击吗？

---

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

Answer 1

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

该onMouseDown事件在发射前onBlur的事件,所以如果你用它来启动导航,没有必要对魔法超时.

这是一个小提琴演示:https://jsfiddle.net/bp80sg7w/2/