反應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事件沒有被拿起

回答

相關問題