react-native開發總結之TextInput失去焦點觸發事件和TextInput間切換
阿新 • • 發佈:2019-02-05
問題:如何在TextInput失去焦點觸發事件?
需求:在TextInput輸入文字後,旁邊有個取消按鈕,點選取消按鈕會有事件觸發。(模糊搜尋)
突發情況:在TextInput獲取焦點後我需要觸發點選事件,需要點選兩次:第一次失去焦點,第二次方可觸發點選事件;
百度求助後都說是需要在外層套一個<ScrollView keyboardShouldPersistTaps={'handled'}></ScrollView>
設定 keyboardShouldPersistTaps屬性;
keyboardShouldPersistTaps
如果當前介面有軟鍵盤,那麼點選scrollview後是否收起鍵盤,取決於本屬性的設定。(譯註:很多人反應TextInput無法自動失去焦點/需要點選多次切換到其他元件等等問題,其關鍵都是需要將TextInput放到ScrollView中再設定本屬性)
'never'
(預設值),點選TextInput以外的子元件會使當前的軟鍵盤收起。此時子元素不會收到點選事件。'always'
,鍵盤不會自動收起,ScrollView也不會捕捉點選事件,但子元件可以捕獲。'handled'
,當點選事件被子元件捕獲時,鍵盤不會自動收起。這樣切換TextInput時鍵盤可以保持狀態。多數帶有TextInput的情況下你應該選擇此項。
但是我反反覆覆試驗之後沒有效果。
解決方案:網友的解決方案是對的,錯的是我這是一個城市列表,用<SectionList/>寫的,而我的搜尋框是<SectionList/>的頭部元件ListHeaderComponent 寫的,所以我應該是在<SectionList/>上加keyboardShouldPersistTaps={'handled'}
同理:如果是<ScrollView/>內多個TextInput切換也是會點選2次才回去焦點,處理方法同上;
最後,目的實現了,但是鍵盤沒有收回去,這時我們只好手動觸發鍵盤事件了,也很簡單;
先引入‘dismissKeyboard’模組,然後再事件觸發dismissKeyboard()方法;搞定;
const dismissKeyboard = require('dismissKeyboard');
clearSearch(){
dismissKeyboard()
}