1. 程式人生 > >react-native開發總結之TextInput失去焦點觸發事件和TextInput間切換

react-native開發總結之TextInput失去焦點觸發事件和TextInput間切換

問題:如何在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'}

;而不是在TextInput外面再裹一層;

同理:如果是<ScrollView/>內多個TextInput切換也是會點選2次才回去焦點,處理方法同上;

最後,目的實現了,但是鍵盤沒有收回去,這時我們只好手動觸發鍵盤事件了,也很簡單;

先引入‘dismissKeyboard’模組,然後再事件觸發dismissKeyboard()方法;搞定;

const dismissKeyboard = require('dismissKeyboard');

clearSearch(){
    dismissKeyboard()
}