反应 onClick 事件没有被拾起答案

【问题标题】：React onClick event not being picked up反应 onClick 事件没有被拾起
【发布时间】：2016-11-29 01:55:40
【问题描述】：

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

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

可在此处找到示例代码：https://jsfiddle.net/chez/h22qfx45/。

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

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

【问题讨论】：

你有一个竞争条件。将您的closeResults 更改为setTimeout(() => this.setState({resultsOpen: false}), 200); 以观察它。我猜你在点击注册之前隐藏了元素（请记住，浏览器会在触发点击事件之前移除焦点）。我现在没有时间进一步研究它，但也许它会有所帮助。
如果您能发布代码中最令人困惑或您认为最重要的部分，那就太好了。

标签： javascript events reactjs

【解决方案1】：

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

要解决这个问题，您只需将onClick 替换为onMouseDown。

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

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

【讨论】：

React AFAIK 并不是真正的问题，这只是浏览器中发生的事情的顺序。 React 恰好反应足够快（harr），这很重要:)
我将 issue 替换为 thing。感谢您的信息:)
真的是javascript 东西。
我找到了一个可以说明这一点的代码笔。请注意在触发点击之前聚焦输入时会发生什么。 codepen.io/mudassir0909/pen/eIHqB。真的，这是一个 DOM 的东西 ;)
感谢您的快速回答。我唯一担心的是DOM Level 3 Events 规范指出：为了获得最大的可访问性，鼓励内容作者在定义自定义控件的激活行为时使用单击事件类型，而不是使用其他指针设备事件类型，例如 mousedown 或 mouseup ，它们更特定于设备。但是，使用 'onMouseDown' 似乎在实践中有效......

【解决方案2】：

忘记 onBlur 事件。 onBlur 不是您要隐藏内容的时候。您的意思是一旦做出选择就隐藏您的内容。因此，我建议您完全删除 closeResults() 方法以及 onBlur 事件。从那里您将想要更改您的 handleSearchResultClick() 方法以包括更改结果的可见性状态。

我有一个更新的 Fiddle 可以满足您的需求 here。

简而言之：删除这些：

onBlur={this.closeResults}

closeResults() {
//this.setState({resultsOpen: false});
},

改变

handleSearchResultClick(event) {
    var selectedResult = event.target.innerText;
    this.setState({searchString: selectedResult});
},

到

handleSearchResultClick(event) {
    var selectedResult = event.target.innerText;
    this.setState({searchString: selectedResult, resultsOpen: false});
},

【讨论】：

所以上面的例子是一个组成更大表单的字段。用户可能会在不进行选择的情况下将焦点移动到另一个字段。 onBlur 似乎是一个很好的触发器来关闭不依赖于跨组件通信的结果......