延遲Blur回調

Question

我在React中製作了一個​​3210組件，當您在文本框中鍵入內容時，它會顯示建議完成的下拉列表。點擊一個建議應該觸發一個回調，並且當文本框失去焦點時下拉應該消失。問題是，onBlur事件的文本框中觸發之前的onClick事件的建議，因此發生的事情是：

1. 點擊項目
2. 文本框失去焦點=>this.setState(this.getInitialState())
3. 組件重新排列，因爲狀態已被清除而沒有任何建議框
4. 點擊事件落在建議項目曾經是的空白處

什麼是解決這個問題的最佳方法，而不是像onBlur={setTimeout(() => this.setState(this.getInitialState()), 100)}這樣的破解？

Answer 1

找到一個非常簡單的解決方案：mousedown事件在文本輸入觸發blur觸發之前點擊結果項目。此外，如果mousedown回調中調用event.preventDefault()，它可以防止blur事件從燒製輸入，但並不妨礙未來click事件從結果項射擊一次mouseup發生。所以，長話短說，簡單地增加這種處理的結果項目修復的一切：onMouseDown={event => event.preventDefault()}

Answer 2

看起來像有一個開源​​3210成分，他們不得不應對this exact problem。