反应onClick事件没有被拿起

我正在使用自动完成功能的搜索组件，我遇到了一些奇怪的行为。该组件由一个输入（SearchInput）和一个提前输入结果列表（SearchResultWrapper）组成。反应onClick事件没有被拿起

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

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

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

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

2016-07-25 Nitax

你有一个竞争条件。将'closeResults'改为'setTimeout（（）=> this.setState（{resultsOpen：false}），200）;'观察它。我猜你在点击注册之前隐藏了元素（请记住，浏览器在触发点击事件之前会移除焦点）。我现在没有时间进一步研究它，但也许有帮助。 – ivarni

如果您可以发布最令人困惑的代码或您认为最重要的代码部分，那将会很不错。 – HoldOffHunger

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

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

下面的代码：https://jsfiddle.net/h22qfx45/5/

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

来源

2016-07-25 16:18:47

React AFAIK并不是真正的问题，这只是浏览器中发生的顺序。 React只是反应足够快（harr），它很重要:) – ivarni

我用_thing_取代_issue_。感谢您的信息:) –

这是一个JavaScript *的东西*真的。 – Chris

忘掉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}); 
},

来源

2016-07-25 19:37:28 lkg

所以上面的例子是组成一个更大的表单的一个字段。用户可能会将焦点移至另一个字段而不进行选择。 'onBlur'似乎是一个很好的触发器，可以关闭不依赖于跨组件通信的结果。 – Nitax

反应onClick事件没有被拿起

回答

相关问题