はじめに
こんにちは。久しぶりに投稿させていただきます。今回もReact Nativeの開発ノウハウです。
「この入力欄には数字のみ受け付けてほしい」
こういう要望、よくあるではないか。
React NativeのTextInputでは入力タイプが設定できないが、下記のように実装してたら、入力制限もできる。
<TextInput
onChangeText={t => setText(t.replace(/[^0-9]/g, ""))}
value={text}
/>
……けれども、Windows環境で、日本語IMEで入力すると、問題が起きる。
問題点
問題というのは、TextInputにすでに何か入力していた場合、日本語IMEで何かを入力しようとすると（もちろん、日本語を受け付けないようにしている）、既存の文字が消去される。
Expo Snackで動作を見ましょう。
上記のようにTextInputを実装していたら、数字だけ受け付けることになる。
次に日本語IMEで「あいうえお」を入力してみる。「あ」と「い」を押したら、かなが出てこないが、入力欄の「0」が消えた。
つづいて「お」まで押したら、すべての数字が消えた。
この問題は、Windowsに起きるけど、Android/iOSには起きない。ちなみに、ほかの日本語IMEや中国語IMEでも問題が起きる（Google日本語IME・Microsoft中国語IMEで検証済み）。
解決策
なぜこうなるかわからないけど、IMEが原因だとなんとなく理解しているだろう。では解決するにも、IMEに何とかすることですね。
W3Cはたくさんのキーボード押すイベントを定義している。そのうち、IME入力も含んでいる。
https://www.w3.org/TR/uievents-key/#keys-composition
React Native TextInputでは、上記の一部を利用していて、キーボード押すイベント（onKeyPress）に入っている。そして、onKeyPressの発火タイミングはonChangeTextより先。そこで、onKeyPressでIME入力かどうかを判別し、YESの場合、IME入力自体を無視すれば、問題回避できるだろう。
ではさっそくやってみましょう。
<TextInput
onKeyPress={e => {
isIme = e.key == "Process"; //IMEで入力する時、値は常に"Process"
}}
onChangeText={t => {
if (!isIme) setText(t.replace(/[^0-9]/g, ""));
}}
value={text}
/>
このように実装していれば、既存の文字が消去される問題が回避できる。
「あいうえおかきくけこ」まで押しても、数字たちが消去されていない。
最後に
この記事はあくまでも私個人の経験です。間違っているところ、もっと良い方法がございましたら、ぜひ教えてください。
参考資料
https://stackoverflow.com/questions/32946793/react-native-textinput-that-only-accepts-numeric-characters
https://www.w3.org/TR/uievents-key/#keys-composition