Question

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

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

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

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

显然我在这里缺少一个基本概念。 React是否将其事件侦听器与SearchResult组件断开连接，因为它被隐藏了？

Answer 1

JS中有一件事：在onBlur之前调用onClick。

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

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

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

Answer 2

忘掉onBlur事件。 onBlur不是什么意思隐藏你的内容。您的意思是在做出选择后隐藏您的内容。所以，我建议您完全删除closeResults（）方法以及onBlur事件。从那里你将需要更改handleSearchResultClick（）方法以包括更改结果的可见性状态。

我有一个更新的小提琴，可以完成您所需要的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});
},

React onClick事件未被提取

2 个答案: