javascript - React onClick 事件未被拾取

Question

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

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

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

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

这里显然缺少一个基本概念。由于 SearchResult 组件是隐藏的，因此 React 是否会断开其事件监听器与它的连接？

Answer 1

在 JS 中有一个东西:onBlur 在 onClick 之前被调用。

解决方法是将onClick替换成onMouseDown即可。

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

来源: onclick() and onblur() ordering issue