反应 onClick 事件未被拾取

Question

我正在研究具有自动完成功能的搜索组件，但遇到了一些奇怪的行为。该组件由一个输入 ( SearchInput) 和一个预输入结果列表 ( SearchResultWrapper) 组成。

单击预先输入的结果应SearchInput使用选定的结果填充该字段并隐藏预先输入的结果。失去对领域的关注也应该隐藏结果。

示例代码可以在这里找到：https : //jsfiddle.net/chez/h22qfx45/。

当您在closeResults负责更改组件状态以隐藏预输入结果的函数中进行注释时，问题就出现了。当此代码被激活时，React 不再选择的onClick处理程序SearchResult。

显然我在这里遗漏了一个基本概念。由于SearchResult组件是隐藏的，React 是否会断开其事件侦听器与组件的连接？

Answer 1

JS 中有一个东西：onBlur在onClick.

要解决它，您只需要替换onClick为onMouseDown。

这是代码：https : //jsfiddle.net/h22qfx45/5/

来源： onclick() 和 onblur() 排序问题