搜索栏结果由于onBlur而无法点击

Question

当用户搜索下拉列表中显示的结果时，我有一个搜索栏...

问题是我遇到了一个onBlur事件，当用户从搜索框单击鼠标移至其他任何元素时，列表的显示均变为无。

与此相关的问题是，当用户单击结果时，它不是搜索栏，并且搜索栏丢失了焦点，因此不会触发对搜索结果的li元素的点击。

onBlur={() => sethelpFocus(false)}

将状态设置为false，使状态className隐藏元素。

我找到的唯一解决方法是执行以下操作：

onBlur={() =>
  setTimeout(() => {
      sethelpFocus(false);
  }, 120)
}

您可以想象，我不喜欢使用超时，因为它们似乎有点破烂，它使用户有时间在元素未注册（也称为onBlur）注册之前单击它。 / p>

有更好的方法来解决这个问题吗？

非常感谢。

Answer 1

与其将搜索结果隐藏在输入的blur事件上，不如将它们隐藏在文档的click中。

这样，它们将在用户单击任意位置后被隐藏，但是元素将有机会处理该单击。