Reagieren onClick-Ereignis wird nicht abgeholt

Question

Ich arbeite an einer Suchkomponente mit Auto-Vervollständigung-Funktion und ich bin in ein seltsames Verhalten. Die Komponente besteht aus einem Eingang (SearchInput) und einer Liste von Typ-Ahead-Ergebnissen (SearchResultWrapper).

Durch Klicken auf ein Schnelladressierungsergebnis wird das Feld SearchInput mit dem ausgewählten Ergebnis ausgefüllt und die Schnelladressierungsergebnisse ausgeblendet. Wenn Sie den Fokus auf das Feld verlieren, sollten Sie auch die Ergebnisse ausblenden.

Beispielcode finden Sie hier: https://jsfiddle.net/chez/h22qfx45/.

Das Problem tritt auf, wenn Sie in der closeResults-Funktion kommentieren, die für das Ändern des Status der Komponente verantwortlich ist, um die vorausgehenden Ergebnisse auszublenden. Wenn dieser Code aktiviert ist, wird der onClick-Handler für den SearchResult nicht mehr von React übernommen.

Es gibt offensichtlich ein grundlegendes Konzept, das ich hier vermisse. Hebt React das Trennen seiner Ereignis-Listener von der Komponente SearchResult auf, da diese ausgeblendet ist?

Answer 1

Es gibt eine Sache in JS: onBlur heißt vor onClick.

Um es zu lösen, müssen Sie nur onClick durch onMouseDown ersetzen.

Hier ist der Code: https://jsfiddle.net/h22qfx45/5/

Quelle:onclick() and onblur() ordering issue

Answer 2

Vergessen Sie die onBlur Ereignis. OnBlur ist nicht, wenn Sie Ihren Inhalt verbergen wollen. Sie beabsichtigen, Ihren Inhalt zu verbergen, sobald eine Auswahl getroffen wurde. Also würde ich vorschlagen, dass Sie die Methode closeResults() sowie das Ereignis onBlur vollständig entfernen. Von dort aus möchten Sie die Methode handleSearchResultClick() ändern, um den Sichtbarkeitsstatus der Ergebnisse zu ändern.

Ich habe eine aktualisierte Fiddle, die das tut, was Sie suchen here.

Kurz: entfernen diese:

onBlur={this.closeResults} 

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

und

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

zu

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