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

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

...

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

更新

onBlur操作隐藏了SearchResults组件，未注册Link点击。有没有办法在执行onBlur操作之前注册链接点击？

当我在Link回调中发送Redux操作时，为什么没有反应路由器在onBlur点击时注册路由更改？

Answer 1

简单地说，因为onBlur事件在注册click事件之前被触发，即您的链接从DOM中消失后才能确认它已被点击。

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

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

React-router不使用输入onBlur事件

1 个答案: