javascript - 反应 onMouseEnter 正在阻止 onClick

Question

我有一个按钮，当用户悬停它时，它使用 graphQL Apollo Client 发送预取请求。

问题是 onClick 事件被阻止了几毫秒。有人可以解释为什么单独的事件会像这样发生冲突。我想不出为什么我的 onclick 事件在请求运行时没有触发，因为它是异步的。

<div
   role="button"
   key={shortId()}
   onMouseEnter={prefetch(value.value)}
   onClick={onToggle(id, value.value)}
   className="FilterGroup__item"
>
   {renderWidget({value, selected})}
    <span className="FilterGroup__item__count">{value.count}</span>
</div>

prefetch 返回的函数是：

    const [searchPrefetch] = useLazyQuery(searchQuery, {
        returnPartialData: true
    });

    const sendSearchPrefetch = (additionalParameters?: IAdditionalSearchParameters) => {
        searchPrefetch({
            variables: getRequestParameters(additionalParameters)
        });
    };

const handlePrefetch = useCallback(
        debounce(async (additionalFacets?: IAdditionalSearchParameters) => {
            sendSearchPrefetch(additionalFacets);
        }, SEARCH_DEBOUNCE_TIMER_MS),
        []
    );

  const prefetch = (filter: string) => (value: string) => () => {
        handlePrefetch({filters: {[filter]: value}});
    };

标签： javascriptreactjs

Answer 1

这与这篇文章类似。将处理程序绑定到 click 和 mouseenter 并不是一个好主意。所以，我建议你更新状态而不是处理事件。在我们获得更新的状态后，我们可以调用处理程序。这是一个伪代码来证明：

const [prefetch, setPrefetch] = useState('')
const [toggle, setToggle] = useState({})

onMouseEnter={setPrefetch(value)}
onClick={setToggle({id,value})}

useEffect(() => { // you may use memoized effect
  if (prefetch) {
    prefetchFunc(prefetch)
  }
  if (toggle) { // you may check additional detail
    toggleFunc(toggle)
  }
}, [prefetch, toggle])