以前、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 要素からフォーカスを外す方法についてでした。
ご参考になれば幸いです。