【React Native】Input要素に当たっているフォーカスを外す

以前、React Native アプリでソフトウェアキーボードを消す方法として、Keyboard.dismiss() をご紹介しましたが、今回は Input 要素からフォーカスを外す方法についてです。
結局実装はしなかったのですが、今後使うかもしれないので手順をまとめ。
なお、今回は React Native Elements というライブラリの <Input /> 要素を使用しています。

フォーカスを外す方法については、React Native Elements の Input の項目に記述がありました。

Input | React Native Elements
https://reactnativeelements.com/docs/input#calling-methods-on-input

 

まず、変数 input を下記のように定義します。

const input = React.createRef();

次にこの input を、任意の Input 要素の ref に設定します。

<Input
  ref={input}
  ... />

準備は以上です。

あとは、Input 要素からフォーカスを外したいタイミングで下記を実行するだけです!

// Input 要素からフォーカスを外す
input.current.blur();

なお、フォーカスが当たっているかどうかの判定をしたい場合は下記を実行します。

// フォーカスが当たっているかの判定
input.current.isFocused();

処理としては以上です!
実際に上記を実行したところ、Input 要素からフォーカスが外れ、ソフトウェアキーボードが非表示になることが確認できました。
…まあ、結局使わなかったのですがね!

 

以上、React Native で Input 要素からフォーカスを外す方法についてでした。
ご参考になれば幸いです。

>株式会社シーポイントラボ

株式会社シーポイントラボ

TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:〒432-8003
   静岡県浜松市中央区和地山3-1-7
   浜松イノベーションキューブ 315
※ご来社の際はインターホンで「316」をお呼びください

CTR IMG