反應未點擊事件

Question

我正在研究具有自動完成功能的搜索組件，並且遇到了一些奇怪的行為。 該組件由一個輸入（ SearchInput ）和一個預輸入結果列表（ SearchResultWrapper ）組成。

單擊預先輸入的結果應使用所選結果填充SearchInput字段，並隱藏預先輸入的結果。 失去對領域的關注也應該掩蓋結果。

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

當您在closeResults函數中進行注釋時，就會出現問題，該函數負責更改組件的狀態以隱藏預輸入的結果。 激活此代碼后，React將不再使用SearchResult的onClick處理程序。

我顯然在這里缺少一個基本概念。 由於它是隱藏的，React是否將其事件偵聽器與SearchResult組件斷開連接？

Answer 1

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

要解決此問題，只需將onClick替換為onMouseDown 。

這是代碼： https : //jsfiddle.net/h22qfx45/5/

來源： onclick（）和onblur（）訂購問題

Answer 2

忘記onBlur事件。 onBlur不是您要隱藏內容的時候。 您的意思是一旦做出選擇就隱藏您的內容。 因此，我建議您完全刪除closeResults（）方法以及onBlur事件。 從那里開始，您將需要更改handleSearchResultClick（）方法以包括更改結果的可見性狀態。

我有一個更新的小提琴，可以滿足您在這里的需求 。

簡而言之：刪除這些：

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